javascript - Why would this v-text-field loose its binding and formatting when placed inside a tab Vuetify tab component -

i using vuetify , using tabs component. however, when put v-text-field inside 1 of tabs. load page first time click on text field highlights , bound. click on link go tab 2 click 1 , input disappear. cycle through again , input unbound , unformatted. have idea how to keep bound?

this code pen https://codepen.io/jakemcallister/pen/rzalrk

bellow code: js

var demo = new vue({     el: '#demo',     data: {         title: 'demo',                 current_object: {             name: 'hello'         }         } }) 

html:

<div id="demo" v-cloak>     <h1>{{title | uppercase}}</h1>      <v-tabs light :scrollable="false"  transition="none">        <v-tabs-bar slot="activators" class="grey lighten-3 light">         <v-tabs-slider class="light-blue darken-4"></v-tabs-slider>         <v-tabs-item key="details" href="#details">           details         </v-tabs-item>         <v-tabs-item key="users" href="#users">           users         </v-tabs-item>       </v-tabs-bar>        <v-tabs-content key="details" id='details' transition="none">         <v-card flat>           <v-container fluid >             tab 1             <v-layout row>               <v-flex xs2><v-subheader>name</v-subheader></v-flex>               <v-flex xs4>                 <v-text-field v-model="current_object.name" single-line                                key='company-name'>                 </v-text-field>               </v-flex>             </v-layout>           </v-container>         </v-card>       </v-tabs-content>        <v-tabs-content key="users" id='users' transition="none">           <v-card flat>            tab  2           </v-card>       </v-tabs-content>      </v-tabs>  </div>