Vue Js Enable Disable Chips Input

<html>

<body>
    <div id="app">
        <h3>Vue Js Chips Input Enabel/Disable</h3>

<div class="chips-container">
            <div class="chips-inner-container">
                <div v-for="(chip, index) in chips" :key="index" class="chip">
                    {{ chip }}
                    <div class="v-chip-close" @click="chipRemove(index)">
                        <span class="material-icons">close</span>
                    </div>

</div>
                <input :disabled="isDisabled" v-model="inputValue" @keydown.enter="addChip"
                    @keydown.delete="backspaceDelete" type="text" placeholder="Enter Tags">
            </div>

<div class="all-chip-close">
                <span @click="allChipsRemove" v-show="show" class="material-icons ">close</span>
            </div>

</div>
        <br>
        <button @click="isDisabled = !isDisabled">Toggle Disable</button>

</div>

data() {
                return {
                    inputValue: '',
                    chips: [],
                    show: false,
                    set: true,
                    isDisabled: true
                }
            },
            methods: {
                addChip() {
                    if (this.inputValue.length) {
                        ((this.set && this.chips.indexOf(this.inputValue) === -1) || !this.set) && this.chips.push(this.inputValue);
                        this.inputValue = ''
                        this.show = true
                    }
                },
                backspaceDelete({ which }) {
                    which == 8 && this.inputValue === '' && this.chips.splice(this.chips.length - 1);
                },

chipRemove(index) {
                    this.chips.splice(index, 1)

allChipsRemove() {
                    this.chips.splice(0)
                    this.show = false
                },

}

});
    </script>
    <style scoped>
        .chips-container {
            display: flex;
            align-items: center;
            box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
            padding: 4px;
            min-height: 34px;
            justify-content: space-between;

}

.chips-inner-container {
            display: flex;
            flex-wrap: wrap;
        }

input {
            flex: 1 1 auto;
            width: 300px;
            border: none;
            outline: none;
            padding: 12px;
        }

.chip {
            background-color: #555;
            border-radius: 28px;
            padding: 8px 12px;
            margin: 2px 4px;
            display: flex;
            align-items: center;
            color: #fff
        }

.v-chip-close,
        .all-chip-close {
            align-items: center;
            color: inherit;
            display: flex;
            font-size: 20px;
            margin: 0 2px 0 8px;
            text-decoration: none;
            cursor: pointer;
        }

.v-chip-close span,
        .all-chip-close {
            color: inherit;
            font-size: 20px;
            cursor: pointer;
            opacity: .5;
        }

.v-chip-close span:hover {
            opacity: 1;
        }

.all-chip-close:hover {
            opacity: 1;
        }
    </style>
</body>

</html>