VueJs2 checkbox v-bind:true-value is not working
<p>I have created a vuejs2 app using vue-cli. I'm trying to bind dynamic value for checkbox as vuejs documentation said: <a href="https://v2.vuejs.org/v2/guide/forms.html#Checkbox-1" rel="nofollow noreferrer">value binding</a>. But its giving me undefined. If I don't bind vlaue its giving me true or false. This is my <strong>ValueBinding.vue</strong> component.</p>
<pre><code>&lt;template&gt;
    &lt;div id=&quot;input&quot;&gt;
        &lt;p&gt; Selected value for smoking: {{ smoking }} &lt;/p&gt;
        &lt;input v-model=&quot;smoking&quot; v-bind:true-value=&quot;Y&quot; v-bind:false-value=&quot;N&quot; type=&quot;checkbox&quot;&gt;
        &lt;label&gt;No Smoking&lt;/label&gt;
        &lt;br&gt;
        &lt;button @click=&quot;submit&quot;&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
    export default {
        name: 'value-binding',
        data() {
            return {
                smoking: ''
            }
        },
        methods: {
            submit() {
                console.log(this.smoking) //shows undefined
            }
        }
    }
&lt;/script&gt;
</code></pre>
<p>I'm new to vuejs. Thanks in advance.</p>