Duplicate component

[amiller911]

I want to add a button subscribed to the right sidebar, but get error:

[Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"

Code button.

` <el-tooltip v-show="visible" :content="subscribed ? 'Unsubscribe' : 'Subscribe'"

<i class="subscribe-icon" :class="subscribed ? 'go-red el-icon-remove' : 'go-green el-icon-circle-plus-outline'" @click="subscribe" `export default { data() { return { Store, visible: true }; },

props: ['list'],

computed: {
    subscribed: {
        get() {
            return Store.state.subscribedAt.indexOf(this.list.id) !== -1
                ? true
                : false;
        },

        set() {
            if (Store.state.subscribedAt.indexOf(this.list.id) !== -1) {
                let removeItem = this.list.id;
                Store.state.subscribedChannels = Store.state.subscribedChannels.filter(
                    (channel) => channel.id != removeItem
                );

                let index = Store.state.subscribedAt.indexOf(this.list.id);
                Store.state.subscribedAt.splice(index, 1);

                return;
            }

            Store.state.subscribedChannels.push(this.list);
            Store.state.subscribedAt.push(this.list.id);
        }
    },

    /**
     * Has the user just registered?
     *
     * @return boolean
     */
    isNewbie() {
        return this.$route.query.newbie == 1;
    }
},

methods: {

    subscribe: _.debounce(
        function() {
            this.subscribed = !this.subscribed;

            axios
                .post(`/channels/${this.list.id}/subscribe`)
                .catch(() => {
                    this.subscribed = !this.subscribed;
                });

            this.$emit('subscribed');
        },
        200,
        { leading: true, trailing: false }
    )
}

};`

How to fix problem? Thank you.