Vue country and state selection with select2

I want to list the states of the country in 2nd selection (JSON) format when country is selected in 1 selection I want to make with vuejs. I can do this with normal select but I want to do it in "select2" action. I have not seen or encountered an example of it anywhere.

For example, when France is chosen as the country. in the second option i want the states of france to be listed

Please answer considering that you are a beginner when writing an answer.

select2 or vue-select

[
    {
        "country": "America",
        "plate": 1
    },
    {
        "country": "France",
        "plate": 2
    },
    {
        "country": "Holland",
        "plate": 3
    },
    {
        "country": "China",
        "plate": 4
    },
    {
        "country": "state",
        "plate": 5
    }
]

[
  {
    "id": 1,
    "country": "America",
    "state": "Texas"
  },
  {
    "id": 2,
    "country": "America",
    "state": "NewMexico"
  },
  {
    "id": 3,
    "country": "America",
    "state": "Montana"
  },
  {
    "id": 4,
    "country": "France",
    "state": "Normandy"
  },
  {
    "id": 5,
    "country": "France",
    "state": "Paris"
  },
  {
    "id": 6,
    "country": "France",
    "state": "Occitanie"
  },
  {
    "id": 7,
    "country": "Holland",
    "state": "Köln"
  },
  {
    "id": 8,
    "country": "Holland",
    "state": "Brüksel"
  },
  {
    "id": 9,
    "country": "China",
    "state": "Gansu"
  },
    {
    "id": 10,
    "country": "China",
    "state": "Hubei"
  },  
  {
    "id": 11,
    "country": "China",
    "state": "Hainan"
  },
    {
    "id": 12,
    "country": "Iraq",
    "state": "Erbil"
  },
    {
    "id": 13,
    "country": "Iraq",
    "state": "Bagdat"
  }
]

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <label class="my-1 mr-2">countries</label>
                <select class="custom-select my-1 mr-sm-2 form-control" v-model="selected" @change="getState()">
                    <option v-if="selected === 'Choose'">Choose</option>
                    <option v-for="item in countries" v-bind:key="item.id">{{ item.country}}
                    </option>
                </select>
            </div>

            <div class="col-md-4 ">
                <label class="my-1 mr-2">state</label>
                <select class="custom-select my-1 mr-sm-2 form-control">
                    <option v-if="selectedCountry === false">Choose</option>
                    <option v-for="list in states" v-bind:key="id">{{ list.state}}</option>
                </select>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selected: 'Choose',
            countries: {},
            states: [],
            selectedCountry: false,
        }
    },
    created() {
        this.getCounty()
    },
    methods: {
        getCounty() {
            axios.get('json/country.json')
                .then(res => this.countries = res.data)
        },
        getState() {
            this.selectedCountry = true
            this.states = []
            axios.get('json/states.json')
                .then(res => {
                    res.data.forEach(i => {
                        if (this.selected === i.country) {
                            this.states.push(i.state)
                        }
                    })
                })
        }
    }
}
</script>