Как удалить из памяти компонент VUE?

Сильно упрощенно у меня задача такая:

Есть мой компонент, который я вывожу в цикле несколько раз на странице (в соответствии с массивом данных). Длинна массива данных со временем меняется. Как мне удалить лишний компонент при уменьшении масива данных? Нужно мне это, чтобы лишние компоненты отписались от событий!

Можно описать примерно так:

<template>
<v-card>
  <template v-for="(item, i) in list">
      <my-component :name="item.name" :key="i"></my-component>
  </template>
    <v-btn @click.stop="addItem">Add</v-btn>
    <v-btn @click.stop="removeItem">Remove</v-btn>
</v-card>
</template>
<script>
import myComponent from '~/components/myComponent';
export default {
    components: {
        myComponent
    },
    data () {
        return {
            list: [
                {name: 'test'},
                {name: 'test'},
                {name: 'test'},
                {name: 'test'}
            ]
        };
    },
    methods: {
        addItem () {
            this.list.push({name: 'test'});
        },
        removeItem () {
            if (this.list.length > 0) {
                this.list.pop();
            }
        }
    }
};
</script>