Delete a Vue child component : <p>I'm really stuck on this one.I have created a Vue (2.0) component that is made up of child components, it's all being Webpacked etc. For example, this is the parent:</p>

<pre><code>&lt;div&gt;

    &lt;h1&gt;This is just a title for lulz&lt;/h1&gt;

    &lt;rowcomponent v-for="row in rows" :row-data="row"&gt;&lt;/rowcomponent&gt;

&lt;/div&gt;
</code></pre>

<p>which has a prop of <code>rows</code> passed to it which looks something like this:</p>

<pre><code>rows: [{ sometext: "Foo"} , { sometext: "Bar" }]
</code></pre>

<p>So my row component looks like this: </p>

<pre><code>&lt;div&gt;{{ this.sometext }} &lt;button @click="deleteRow"&gt;Delete Row&lt;/button&gt;&lt;/div&gt;
</code></pre>

<p>And I feel like it should be really easy to set a method on the <code>rowcomponent</code> that is something like this:</p>

<pre><code>deleteRow() {
    this.delete();
}
</code></pre>

<p>Do I need to $emit something to the parent with the index of the row in it to remove it? It's driving me crazy. All the examples seem to suggest it would be easy to do, but not in the case where you have child components that want to delete themselves.</p>
