Значения v-chip не отображаются после щелчка по значениям раскрывающегося списка, а закрытие чипа не закрывается

<template>
<div>
     <v-row>
                  <v-col
                    class = "d-flex justify-center"
                    cols = "6"
                  >
                    <div class = "positionButton">
                      <v-btn
                        class = "accent-3 blue"
                        dark
                      >
                        Add voice
                      </v-btn>
                    </div>
                  </v-col>
                  <v-col
                    class = "d-flex justify-center"
                    cols = "6"
                  >
                    <VideoPrueba
                      v-for = "(step, key) in steps"
                      :key = "key"
                      v-model = "step.selected"
                      :items = "step.options"
                    />
                  </v-col>
                </v-row>
                </div>
</template>

<script>
import VideoPrueba from './VideoPrueba'
  export default {
    name: 'HelloWorld',
    components:{VideoPrueba},
   
    data: () => ({
       steps: [
      {
        title: 'Videos',
        options: ['Video 1', 'Video 2', 'Video 3', 'Video 4'],
        selected: []
      }
    ],
   } )
  }
</script>

<template>
  <div>
    <div>
            <span v-for = "(el, i) in hey" :key = "el.text" class = "shrink">
                <v-chip :disabled = "loading" close @click = "del(el, i)">
                  <v-icon left v-text = "el.icon"></v-icon>
                  {{ el.text }}
                </v-chip>
          </span>
    </div>


    <v-tooltip top>
      <template #activator = "{on, attrs}">
        <div
          multiple
          v-on = "on"
        >

    <v-select
                v-bind = "attrs"

      v-model = "hey"
      :items = "items"
      label = "Seleccion video"
      multiple
      return-object
    >



      <template v-slot:selection = "{ item, index }">
        <v-chip v-if = "hey.length=== 0">
          <span> Seleccion video</span>
        </v-chip>
        
      </template>
    </v-select>
      </div>
      </template>
      <span>Select videos here,please</span>
    </v-tooltip>

  </div>
</template>

<script>
export default {
  name: "VideoPrueba",

  props: {
    items: {
      type: [Array, Object],
      default: [],
    },
   
  },
  data: () => ({
    hey: "",
    model: {
      prop: "input",
      event: "change",
    },
    
    loading: false,
    selectedItems: [],
  }),
  watch: {
    hey(val){
      console.info('val',val)
      val.map((el, i) => {
        console.info('valor de selecteditems',this.selectedItems)
          console.info('valor de el',el)

        if (!this.selectedItems.includes(el)) {
          console.info('incluido')
          this.selectedItems.push(el);
        } else {
          console.info(el,i)
          //this.selectedItems.push(el);
          this.selectedItems.slice(el, 1);
        }
      });
    }
  },
 
  methods: { 
    del(el, i){      
      console.info(el)
       console.info(i)
       this.selectedItems.splice(i, 1)
    }
  },
  
};
</script>