Форма ввода Select2 не меняет значение с помощью vue

Question

мне нужна помощь. Итак, в основном, когда я использовал обычную форму выбора, мне удалось передать данные. но когда я перехожу на select2. Почему мой select2 не меняет значение как форма select2 ??

Это моя обычная форма выбора с данными успешной передачи

<template>
    <div class="col-md-3 col-sm-4">
        <div class="filter-sidebar">
            <div class="col-md-12 form-title">
                <h2>Find the OPD</h2>
            </div>
            <form id="search" role="form" class="" @submit.stop.prevent="searchOpdForm" method="post">
                <div class="col-md-12 form-group category">
                    <label class="control-label" for="category">Instansi / OPD</label>
                    <select id="opd" name="opd" class="form-control" v-model="selectopd.opd">
                        <option v-for="opd in opds" :key="opd.index" :value="opd.id">{{opd.nama_opd}}</option>
                    </select>
                </div>
                <div class="col-md-12 form-group button">
                    <button type="submit" class="btn tp-btn-primary tp-btn-lg btn-block">Cari</button>
                    <router-link :to="{name: 'listings'}" class="btn btn-reset"><i class="fa fa-repeat"></i>Reset</router-link>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import {API_BASE} from '../Config/config'
    

    export default {
        name: 'Sidebar',
        data() {
            return {
                opds: [],
                selectopd: {}
            }
        },
        created() {
            this.fetchOpds();
        },
        
        methods: {
            searchOpdForm() {
                let urlpost = `${API_BASE}/listings/search/opd`
                console.log('submiting')
                axios.post(urlpost, this.selectopd)
                    .then(response => {
                        this.$router.push({name: 'searchlistingopd', params: {listings: response.data.listings}})
                        console.log('successful')
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            fetchOpds() {
                let url = `${API_BASE}/get-opds`
                axios.get(url)
                    .then(response => {
                        this.opds = response.data.opds
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        }
    }
</script>

И это с примером выбранного идентификатора:

И если я изменится на это, и немного поищу с формой выбора select2, и мой код будет таким

<template>
    <div class="col-md-3 col-sm-4">
        <div class="filter-sidebar">
            <div class="col-md-12 form-title">
                <h2>Find the OPD</h2>
            </div>
            <form id="search" role="form" class="" @submit.stop.prevent="searchOpdForm" method="post">
                <div class="col-md-12 form-group category">
                    <label class="control-label" for="category">Instansi / OPD</label>
                    <select id="opd" name="opd" class="form-control" v-model="selectopd.opd">
                        <option v-for="opd in opds" :key="opd.index" :value="opd.id">{{opd.nama_opd}}</option>
                    </select>
                </div>
                <div class="col-md-12 form-group button">
                    <button type="submit" class="btn tp-btn-primary tp-btn-lg btn-block">Cari</button>
                    <router-link :to="{name: 'listings'}" class="btn btn-reset"><i class="fa fa-repeat"></i>Reset</router-link>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import {API_BASE} from '../Config/config'
    import jQuery from 'jquery'
    let $ = jQuery
    require('select2')

    export default {
        name: 'Sidebar',
        data() {
            return {
                opds: [],
                selectopd: {}
            }
        },
        created() {
            this.fetchOpds();
        },
        mounted() {
            $("#opd").select2()
        },
        methods: {
            searchOpdForm() {
                let urlpost = `${API_BASE}/listings/search/opd`
                console.log('submiting')
                axios.post(urlpost, this.selectopd)
                    .then(response => {
                        this.$router.push({name: 'searchlistingopd', params: {listings: response.data.listings}})
                        console.log('successful')
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            fetchOpds() {
                let url = `${API_BASE}/get-opds`
                axios.get(url)
                    .then(response => {
                        this.opds = response.data.opds
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        }
    }
</script>

Теперь, когда я выбираю значение, оно ничего не меняет. Так же, как это

Я делаю неправильно с кодом select2, чтобы использовать его в моем компоненте? Или я пропустил что-то, что можно добавить как обычный JQuery в обычном?