javascript - 在动态组件vue中使用tokenfield

Question

有添加变体按钮。当我单击它时，会出现另一个动态输入，但不幸的是，tokenfield 不适用于这种方式。只有当我点击两次添加变体按钮时它才有效。

data() {
    return {
        variants: [
            {
                variant_options: '',
            },
        ],
    };
},
methods: {
    tokenField() {
        $('.variant_options').tokenfield({
            showAutocompleteOnFocus: false,
        });
    },
    addVariant() {
        if (this.variants.length <= 1) {
            this.variants.push({
                variant_type: '',
                variant_options: '',
            });
            this.tokenField();
        } 
    },
}, // methods:
mounted() {
    this.tokenField();
},
<button
                                                        @click="addVariant"
                                                    >
                                                        Add Variant
                                                    </button>
<div
                                                    v-for="(variant, index) in variants"
                                                    :key="index"
                                                >
<input
                                                                        type="text"
                                                                       
                                                                        class="
                                                                            variant_options
                                                                        "
                                                                    />

</div>