Question about props

Hi,

I'm following the series on Laracasts about making a forum.

Now I'm implementing file upload in vue.js 2.0 on my own. The problem I have right now is that I cannot change a prop.

I'm trying to remove a media item on te parent component (reaction).

In my Reactions.vue

I loop over all reactions and show them:

<div v-for="(reaction, index) in reactions" :key="reaction.id">
    <reaction :reaction="reaction" @destroyed="destroyed(index)"></reaction>
</div>

Then in my Reaction.vue I've a media component:

<media :media="reaction.media" context="destroy"></media>

The media component looks like this:

<div v-for="file in media" :key="file.id" @click="action(file)">
    <img v-bind:src="fileType(file.file_name)" class="media-file" :alt="file.name" :title="file.name"/>
</div>

So when someone clicks on a file I fire the method action:

action(file) {
    Event.$emit('destroyMedia', file.id);
    FileService.destroy(file.id);
}

Here I fire an event. I'm listening for this event in my Reaction.vue:

created() {
    Event.$on('destroyMedia', (id) => this.reaction.media.splice(id, 1));
}

But.... this is not working because I cannot change a prop -__-.

Is there a way how could I fix this with a clean solution? Without doing something like this:

export default {
        props: ['reaction'],

        data() {
            return {
                reactionData: []
            }
        },

        created() {
            this.reactionData = this.reaction;
        }
    }

Thanks a lot