Vue - InCorrect Binding With Component

Shows binding to String which is incorrect!

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="interface">
  Firstname: <my-input :value="firstname"></my-input>
  Lastname: <my-input :value="lastname"></my-input>
 
  <div> {{firstname}} - {{lastname}} </div>
</div>

<template id="my-input-template">
  <input type="text" placeholder="Text" v-model="value">
</template>

JavaScript

Vue.component('my-input', {
   props: ['value'],
   template: '#my-input-template',
   data: function() {
     return {}
   }
 });

 //---------------------------------------------------------
 new Vue({
   el: '#interface',
   data() {
     return {
       firstname: "Ben",
       lastname: "Clayton"
     }
   }
 });