Javascript move selected option with multiple values from one list to another

I am trying to make a Dual list box for forms where there are multiple selections. This consist of two list one which has options you can select from and one are the options selected. I am using vue2 with vue-bootstrap with no Jquery.

the two list I have are:

      list1:[
  {
    "id": 1,
    "foo": "Test",
    "bar": 12,
    "text": "a"
  },
  {
    "id": 2,
    "foo": "ee",
    "bar": 45,
    "text": "b"
  },
  {
    "id": 3,
    "foo": "aa",
    "bar": 345,
    "text": "c"
  },
  {
    "id": 4,
    "foo": "hi",
    "bar": 56,
    "text": "d"
  },
  {
    "id": 5,
    "foo": "Shot",
    "bar": "Pew pew",
    "text": "e"
  },
  {
    "id": 6,
    "foo": "as",
    "bar": 2345,
    "text": "f"
  }
],
      list2:[
  {
    "id": 5,
    "foo": "Tsst",
    "bar": 132,
    "text": "q1"
  },
  {
    "id": 6,
    "foo": "eeee",
    "bar": "4r5",
    "text": "q2"
  }
],

The HTML for each list looks like this:

<b-row class="my-1">
    <b-col cols="5">
        <select size="30" class="form-control" id="list1" multiple>
            <option v-for="item1 in list1" v-bind:key="item1" value='{"foo":"item1.foo","bar":"item1.bar"}'>{{item1.text}}</option>
        </select>
    </b-col>
    <b-col cols="2">
        <b-col lg="4"  class="pb-2">
            <b-button class="primary" block  variant="primary" size="sm" @click="allToRight">&raquo;</b-button>
            <b-button class="primary" block  variant="primary" size="sm" @click="someToRight">&rsaquo;</b-button>
            <b-button class="primary" block  variant="primary" size="sm" @click="someToLeft">&lsaquo;</b-button>
            <b-button class="primary" block  variant="primary" size="sm" @click="allToLeft">&laquo;</b-button>
        </b-col>
    </b-col>
    <b-col cols="5">
        <select size="30" class="form-control" id="list2" multiple>
            <option v-for="item2 in list2" v-bind:key="item2" value='{"foo":"item2.foo","bar":"item2.bar"}'>{{item2.text}}</option>
        </select>
    </b-col>
</b-row>

The Javascript controlling the buttons look like this:

  someToRight: function() {
    var select = document.getElementById('list1').value
    if(select != ""){
      this.list2.push(select)    //does not properly push values to other list
      var del = this.list1.indexOf(select)
      this.list1.splice(del,1)
    }
  },
  someToLeft: function() {
    var select = document.getElementById('list2').value
    if(select != ""){
      this.list1.push(select)   //does not properly push values to other list
      var del = this.list2.indexOf(select)
      this.list2.splice(del,1)
    }
  },
  allToRight: function() {
    for(let i = 0; i < this.list1.length; i++){
      this.list2.push(this.list1[i])
      this.list1.splice(i,1)
      i--
    }
  },
  allToLeft: function() {
      for(let i = 0; i < this.list2.length; i++){
      this.list1.push(this.list2[i])
      this.list2.splice(i,1)
      i--
  }
}

Right now the buttons to send allToLeft and allToRight work, but the ones for moving one or more selected items do not work unless I get rid of the extra data and make the list with a single value instead of JSON like ['a','b','c'] I think the issue is from the this.list.push(select) line not pushing properly formatting the data pushed from one list to the other.

You can try like following snippet :

new Vue({
  el: '#demo',
  data() {
    return {
      list1:[
        {"id": 1, "foo": "Test", "bar": 12, "text": "a"},
        {"id": 2, "foo": "ee", "bar": 45, "text": "b"},
        {"id": 3, "foo": "aa", "bar": 345, "text": "c"},
        {"id": 4, "foo": "hi", "bar": 56, "text": "d"},
      ],
      list2:[
        {"id": 5,"foo": "Tsst", "bar": 132, "text": "q1"},
        {"id": 6, "foo": "eeee", "bar": "4r5", "text": "q2"}
      ],
      selectedItems: [],
      key: []
    }
  },
  methods: {
    addItem(item) {
      this.list2.push(item)
      let index = this.list1.indexOf(item)
      this.list1.splice(index, 1)
    },
    removeItem(item) {
      this.list1.push(item)
      let index = this.list2.indexOf(item)
      this.list2.splice(index, 1)
    },
    allToRight() {
      this.list2 = this.list2.concat(this.list1)
      this.list1 = []
    },
    allToLeft() {
      this.list1 = this.list1.concat(this.list2)
      this.list2 = []
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="demo">
  <b-row class="my-1">
    <b-col cols="5">
      <select size="30" class="form-control" id="list1" multiple >
        <option v-for="item1 in list1" :key="item1.id" :value="item1.id" @click="addItem(item1)">{{item1.text}}</option>
      </select>
    </b-col>
    <b-col cols="2">
      <b-col lg="4"  class="pb-2">
        <b-button class="primary" block  variant="primary" size="sm" @click="allToRight">&raquo;</b-button>
        <b-button class="primary" block  variant="primary" size="sm" @click="allToLeft">&laquo;</b-button>
      </b-col>
    </b-col>
    <b-col cols="5">
      <select size="30" class="form-control" id="list2" multiple>
        <option v-for="item2 in list2" :key="item2.id" :value="item2.id" @click="removeItem(item2)">{{item2.text}}</option>
      </select>
    </b-col>
</b-row>
</div>