javascript - 動的コンポーネント vue で tokenfield を使用する

Question

バリアントの追加ボタンがあります。クリックすると、別の動的入力が表示されますが、残念ながら tokenfield はこの方法では機能しません。バリアントの追加ボタンを 2 回押した場合にのみ機能します。

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>