Moving items between 2 multiple select elements

I'm trying to integrate shipping zones (country to state) where a user can load a country states from json object to display list of states on a multiple select html element.

// my countries to states json array
{
   "name": "United States",
   "iso3": "USA",
   "iso2": "US",
   "states": [
       {
           "name": "Alabama",
           "state_code": "AL"
       },
       {
           "name": "Alaska",
           "state_code": "AK"
       },
       ...
   ]
},{
   "name": "Uruguay",
   "iso3": "URY",
   "iso2": "UY",
   "states": [
       {
           "name": "Artigas Department",
           "state_code": "AR"
       },
       ...

on same page i have 2 multiple select html where user can select multiple items from states to add them to selected shipping zones list.

<select multiple v-model="selected">
    <option v-for="(state, index) in states"  :key="state.state_code" >
        {{state}}
    </option>
</select>
<select multiple v-model="putback">
  <option v-for="(move, index) in moved"  :key="move.state_code">
        {{move}}
    </option>
</select>

to programmatically move selected items from selected array to moved array i have a button that runs this function

        addStates() {
            this.selected.forEach((state) => {
                this.states.splice(this.states.indexOf(state) , 1)
                this.moved.push(state);
            })
            this.selected = []
        },

As a result i can see that the correct items has been moved to the moved array but my code is not splicing the correct selected items on the selected array (this.states.splice(this.states.indexOf(state) , 1)).

this is my entire component

<template>
<div class="flex p-5 mt-5">
    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2">
        {{trans.countries}}
    </label>
    <div class="relative">
    <select v-model="location" @change="getStates()">
        <option v-for="(country, index) in countries" :key="country.id"
            :value="country.code" v-text="country.en">
        </option>
    </select>
    </div>
    <div class="flex -mx-2">
        <div class="w-1/2 px-2">
            <select multiple v-model="selected">
                <option v-for="(state, index) in states" 
                    :key="state.state_code" 
                >
                    {{state}}
                </option>
            </select>
        </div>
        <div class="flex-column self-center p-2">
            <a @click.stop="addStates()">
                <i class="fas text-blue">Add</i>
            </a>
            <a @click.stop="removeStates()">
                <i class="fas text-blue">Remove</i>
            </a>
        </div>
        <div class="w-1/2 px-2">
            <select multiple v-model="putback">
              <option v-for="(move, index) in moved" 
                    :key="move.state_code">
                    {{move}}
                </option>
            </select>
        </div>
    </div>
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name: 'zone-manager',
    mounted(){
        this.$store.state.trans;
        this.$store.state.countries;
        this.$store.state.zones;
        this.$store.state.states;
    },

    props: ['direction'],
    data () {
          return {
            location    :   '',
            name        :   '',
            errors      :   [],
            selected    :   [],
            moved       :   [],
            putback     :   []
        }
    },

    computed:{
        ...mapState(['trans', 'countries', 'zones', 'states']),
    },

    methods: {
        addStates() {
            this.selected.forEach((state) => {
                this.states.splice(this.states.indexOf(state) , 1)
                this.moved.push(state);
            })
            this.selected = []
        },
        removeStates(){
            this.putback.forEach((state) => {
                this.moved.splice(this.moved.indexOf(state) , 1)
                this.states.unshift(state);
            })
            this.putback = []
        },
        getStates(){
            this.selected = [];
            this.$store.dispatch('getStates', [this.location]);
        },
    }
}
</script>

shoots from my screen https://prnt.sc/0C6_whyHULUI and this https://prnt.sc/7Pzw9SGDFkgr Any ideas on how to fix this issue?