如何在Twig + Vue中使用v-select（带有数组）？

Question

Without Vue, only with select

With Vue, v-select

我有一个数组，我想在树枝模板中将该数组与v-select（vue）一起使用，我该怎么做？

它不带v-select，只能与select一起使用，但我想用v-select对其进行更改。

类似这样的东西（https://codepen.io/sagalbot/pen/dJjzeP）

解决方案将不胜感激。

提前谢谢。

{% extends 'layouts/default.html.twig' %}

{% block navigation %}
    <nav class="navigation">
        <div class="navigation-primary">
            <div class="navigation-logo logo logo--light">
                Gelsen-Net
            </div>
            <a class="ml-auto navigation-login" href="{{ logout_link }}" data-hover="Abmelden ">
                <span>Angemeldet als</span>
                <strong>{{ username }}</strong>
            </a>
        </div>
    </nav>
{% endblock %}

{% block styles %}
{% endblock %}

{% block content %}
    <main id="app">
        <section class="db">
            <div class="container">
                <div class="db-card">
                    <div class="row justify-content-center">
                        <div class="col-12 col-sm-6">
                            <div class="mt-6 mb-6">
                                <div class="form-group">
                                    <form action="/Produktoptionen-0324264344.html" method="post">
                                    <div class="input-group">
                                        <select id="product-oid" name="oid" class="custom-select" v-model="contract">
                                            {% for group in groups %}
                                                <optgroup label="{{group.name}}">
                                                    {% for option in group.list %}
                                                        <option value="{{option.value}}" data-is-highspeed="{% if option.isHighspeed is not empty %}true{% endif %}" {% if option.selected == true %}selected{% endif %}>
                                                            {{option.name}}
                                                        </option>
                                                    {% endfor %}
                                                </optgroup>
                                            {% endfor %}
                                        </select>



I WANT TO USE SOMETHING LIKE BELOW CODE



                                 <div class="form-group">
                                    <v-select v-bind:options='options'> 
                                    </v-select>
                                </div>

CLOSING TAGSSSSSSS WILL COME HERE