<h3 dir="auto">Version</h3>
<p dir="auto">2.5.16</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/50wL7mdz/337120/" rel="nofollow">https://jsfiddle.net/50wL7mdz/337120/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>open console</li>
<li>click todo item</li>
<li>you will see <code class="notranslate">destroyed</code> and <code class="notranslate">updated</code></li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">only <code class="notranslate">destroyed</code> is printed.</p>
<p dir="auto"><code class="notranslate">updated</code> life cycle should not be invoked after component has been destroyed.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto"><code class="notranslate">updated</code> life cycle invoked after component has been destroyed.</p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Consider the <code class="notranslate">&lt;input&gt;</code> element. It maintains its own internal state for its value (by the browser) irrespective of whether or not it is being driven by <code class="notranslate">v-model</code>.</p>
<p dir="auto">After looking at some Vue component libraries, most of the components externalize their state through props, meaning that the parent component must define the value for that component in its data and use <code class="notranslate">v-model</code> to wire it up -- the component cannot be used without <code class="notranslate">v-model</code> because it doesn't maintain the state internally to the component.</p>
<p dir="auto">Ideally I'd like to author input components that satisfy the following requirements:</p>
<ul dir="auto">
<li>Can be used without <code class="notranslate">v-model</code> (the component maintains the state itself)</li>
<li>Can be used with <code class="notranslate">v-model</code> (the state is driven entirely by the prop   emitting <code class="notranslate">input</code> events)</li>
</ul>
<p dir="auto">This results in somewhat messy code like <a href="http://jsfiddle.net/df4Lnuw6/179/" rel="nofollow">this</a>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Vue.component('checkbox', {
  template: '&lt;div class=&quot;checkbox&quot; @click=&quot;toggle&quot;&gt;{{ internalValue ? &quot;Checked&quot; : &quot;Unchecked&quot; }}&lt;/div&gt;',
  
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  
  data() {
    return {
      internalValue: false,
    };
  },
  
  watch: {
    value: {
      immediate: true,
      handler(value) {
        this.internalValue = value;
      },
    },
    
    internalValue(internalValue) {
      this.$emit('input', internalValue);
    },
  },
  
  methods: {
    toggle() {
      this.internalValue = !this.internalValue;
    },
  },
});"><pre class="notranslate"><span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">component</span><span class="pl-kos">(</span><span class="pl-s">'checkbox'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">template</span>: <span class="pl-s">'&lt;div class="checkbox" @click="toggle"&gt;{{ internalValue ? "Checked" : "Unchecked" }}&lt;/div&gt;'</span><span class="pl-kos">,</span>
  
  <span class="pl-c1">props</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">value</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">type</span>: <span class="pl-v">Boolean</span><span class="pl-kos">,</span>
      <span class="pl-c1">default</span>: <span class="pl-c1">false</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-en">data</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span>
      <span class="pl-c1">internalValue</span>: <span class="pl-c1">false</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-c1">watch</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">value</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">immediate</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
      <span class="pl-en">handler</span><span class="pl-kos">(</span><span class="pl-s1">value</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">internalValue</span> <span class="pl-c1">=</span> <span class="pl-s1">value</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-en">internalValue</span><span class="pl-kos">(</span><span class="pl-s1">internalValue</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">$emit</span><span class="pl-kos">(</span><span class="pl-s">'input'</span><span class="pl-kos">,</span> <span class="pl-s1">internalValue</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>
  
  <span class="pl-c1">methods</span>: <span class="pl-kos">{</span>
    <span class="pl-en">toggle</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">internalValue</span> <span class="pl-c1">=</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">internalValue</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><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">In order to distinguish between the prop and the data, I've used <code class="notranslate">value</code> and <code class="notranslate">internalValue</code> respectively. The problem is that <code class="notranslate">value</code> is rarely used in the code (it's only used in the watcher) and I have to remember to use <code class="notranslate">internalValue</code> throughout the component's code and template instead of <code class="notranslate">value</code> (since <code class="notranslate">internalValue</code> is the mutable source of truth).</p>
<p dir="auto">To avoid this, I could instead name the prop <code class="notranslate">externalValue</code> and the data <code class="notranslate">value</code>, but now I would have to use <code class="notranslate">&lt;checkbox :external-value="x"&gt;</code> which is not ideal (the external prop should be called simply "value").</p>
<p dir="auto">I'm proposing a feature in which you can specify what internal name a prop should be exposed as within the component without changing the external name of that prop in templates (kind of like how method arguments work in objective-c).</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Vue.component('foo', {
  props: {
    value: {
      internalName: 'valueProp',
    },
  },

  template: '&lt;div&gt;{{ valueProp }}&lt;/div&gt;',
});"><pre class="notranslate"><span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">component</span><span class="pl-kos">(</span><span class="pl-s">'foo'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">props</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">value</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">internalName</span>: <span class="pl-s">'valueProp'</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-c1">template</span>: <span class="pl-s">'&lt;div&gt;{{ valueProp }}&lt;/div&gt;'</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;foo value=&quot;bar&quot;&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">foo</span> <span class="pl-c1">value</span>="<span class="pl-s">bar</span>"<span class="pl-kos">&gt;</span></pre></div>