<h3 dir="auto">Problem</h3>
<p dir="auto">Currently the props are merged with the instance's own <code class="notranslate">data</code>, which has a few problems:</p>
<ol dir="auto">
<li>Both data and props can declare the same property name. The order and priority of the merging is not clear. Should a prop overwrite the field with the same name in data? Or the other way around? Currently, the props' initial values are available inside <code class="notranslate">data</code> functions, but the same field returned in data gets overwritten by the prop.</li>
<li>Once merged, it's not clear whether a component property is its "private" state or a prop that is passed down from (and thus can be changed by) the parent, unless you go and check the component's props declaration.</li>
</ol>
<h3 dir="auto">Proposal</h3>
<p dir="auto"><del>Move props into its own name space, for example <code class="notranslate">this.props</code>. This avoids the merging problem (we can either make <code class="notranslate">props</code> a reserved field or make it <code class="notranslate">$props</code>) and makes it explicit that something is a prop that is obtained from outside the component.</del></p>
<p dir="auto">Throw a warning if the user defines duplicate fields in <code class="notranslate">data</code> and <code class="notranslate">props</code>.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="new Vue({
    el: '#el',
    template: '#tpl',
    data: {
        items: [
            // works fine if defined here
            // {title: 'Title 1', id: 1},
            // {title: 'Title 2', id: 1},
            // {title: 'Title 3', id: 1},
        ]
    },
    compiled: function(){
        // does not work
        // Uncaught TypeError: Cannot read property 'appendChild' of null
        this.items = [
            {title: 'Title 1', id: 1},
            {title: 'Title 2', id: 1},
            {title: 'Title 3', id: 1},
        ]
    }
})"><pre class="notranslate"><span class="pl-k">new</span> <span class="pl-v">Vue</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">el</span>: <span class="pl-s">'#el'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'#tpl'</span><span class="pl-kos">,</span>
    <span class="pl-c1">data</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">items</span>: <span class="pl-kos">[</span>
            <span class="pl-c">// works fine if defined here</span>
            <span class="pl-c">// {title: 'Title 1', id: 1},</span>
            <span class="pl-c">// {title: 'Title 2', id: 1},</span>
            <span class="pl-c">// {title: 'Title 3', id: 1},</span>
        <span class="pl-kos">]</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">compiled</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
        <span class="pl-c">// does not work</span>
        <span class="pl-c">// Uncaught TypeError: Cannot read property 'appendChild' of null</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">items</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
            <span class="pl-kos">{</span><span class="pl-c1">title</span>: <span class="pl-s">'Title 1'</span><span class="pl-kos">,</span> <span class="pl-c1">id</span>: <span class="pl-c1">1</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-kos">{</span><span class="pl-c1">title</span>: <span class="pl-s">'Title 2'</span><span class="pl-kos">,</span> <span class="pl-c1">id</span>: <span class="pl-c1">1</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-kos">{</span><span class="pl-c1">title</span>: <span class="pl-s">'Title 3'</span><span class="pl-kos">,</span> <span class="pl-c1">id</span>: <span class="pl-c1">1</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">]</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div id=&quot;el&quot;&gt;&lt;/div&gt;

&lt;script id=&quot;tpl&quot; type=&quot;wtf/exception&quot;&gt;
    &lt;div v-repeat=&quot;items&quot; track-by=&quot;id&quot;&gt;
        {{ title }}
    &lt;/div&gt;
&lt;/script&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">el</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">id</span>="<span class="pl-s">tpl</span>" <span class="pl-c1">type</span>="<span class="pl-s">wtf/exception</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-repeat</span><span class="pl-c1">=</span><span class="pl-s">"items"</span> <span class="pl-c1">track-by</span><span class="pl-c1">=</span><span class="pl-s">"id"</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">{</span><span class="pl-kos">{</span> title <span class="pl-kos">}</span><span class="pl-kos">}</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><a href="https://jsfiddle.net/sw_double/uasek0pt/" rel="nofollow">https://jsfiddle.net/sw_double/uasek0pt/</a></p>