<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/hataketed/m0t2ng8b/4/" rel="nofollow">https://jsfiddle.net/hataketed/m0t2ng8b/4/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">just run and see the console errors</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">click alert</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">vue.js:634 [Vue warn]: Property or method "eventname" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: <a href="https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow">https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties</a>.</p>
<p dir="auto">(found in )<br>
warn @ vue.js:634<br>
vue.js:634 [Vue warn]: Invalid value for dynamic directive argument (expected string or null): undefined</p>
<p dir="auto">(found in )<br>
warn @ vue.js:634<br>
vue.js:634 [Vue warn]: Property or method "attributename" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: <a href="https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow">https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties</a>.</p>
<p dir="auto">(found in )<br>
warn @ vue.js:634<br>
vue.js:634 [Vue warn]: Invalid value for dynamic directive argument (expected string or null): undefined</p>
<p dir="auto">(found in )</p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">when we want to do something like hide / show password input we should add state called "IsVisible" in our data but actually this data is specific for this input not relate to our app so we shoud put it on a scope of the element to prevent our data's pollution</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;field&quot; v-data=&quot;{ isVisible : false }&quot;&gt;
   &lt;button @click=&quot;isVisible = !isVisible&quot;&gt;isVisible ? 'hide' : 'show'&lt;/button&gt;
   &lt;input :type=&quot; isVisible ? 'text' : 'password' &quot; /&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">field</span>" <span class="pl-c1">v-data</span>="<span class="pl-s">{ isVisible : false }</span>"<span class="pl-kos">&gt;</span>
   <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">@click</span>="<span class="pl-s">isVisible = !isVisible</span>"<span class="pl-kos">&gt;</span>isVisible ? 'hide' : 'show'<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
   <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">:type</span>="<span class="pl-s"> isVisible ? 'text' : 'password' </span>" /&gt;
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>