title: error: v-model [object InputEvent] in Framework7 Vue
body: <p>I am using <strong>FrameWork7 Vue</strong> (<a href="https://framework7.io/vue/" rel="nofollow noreferrer">https://framework7.io/vue/</a>) and I have the following problem:</p>
  
  <p>Why do not you let me change the value of "<strong>Dispositivo</strong>"?</p>
  
  <p>Does <strong>"v-model"</strong> work in FrameWork7 Vue?</p>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;!--
    Customize this policy to fit your own app's needs. For more guidance, see:
        https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
    Some notes:
        * gap: is required only on iOS (when using UIWebView) and is needed for JS-&gt;native communication
        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
        * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
            * Enable inline JS: add 'unsafe-inline' to default-src
    --&gt;
    &lt;meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover"&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="apple-mobile-web-app-status-bar-style" content="default"&gt;
    &lt;meta name="theme-color" content="#2196f3"&gt;
    &lt;meta name="format-detection" content="telephone=no"&gt;
    &lt;meta name="msapplication-tap-highlight" content="no"&gt;
    &lt;title&gt;My App&lt;/title&gt;
    &lt;link rel="stylesheet" href="libs/framework7/css/framework7.min.css"&gt;
    &lt;link rel="stylesheet" href="css/icons.css"&gt;
    &lt;link rel="stylesheet" href="css/app.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;!-- Statusbar --&gt;
      &lt;f7-statusbar&gt;&lt;/f7-statusbar&gt;
  
      &lt;!-- Right Panel --&gt;
      &lt;f7-panel right cover theme-dark&gt;
        &lt;f7-view id="right-panel-view"&gt;
          &lt;f7-page&gt;
            &lt;f7-navbar title="Right Panel" sliding&gt;&lt;/f7-navbar&gt;
  
  
            &lt;f7-list&gt;
              &lt;f7-list-item link="/conf/" title="conf" view="#main-view" panel-close&gt;&lt;/f7-list-item&gt;
            &lt;/f7-list&gt;
          &lt;/f7-page&gt;
        &lt;/f7-view&gt;
      &lt;/f7-panel&gt;
  
      &lt;!-- Main View --&gt;
      &lt;f7-view id="main-view" main&gt;
        &lt;f7-page&gt;
          &lt;f7-navbar&gt;
            &lt;f7-nav-left&gt;
              &lt;f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left"&gt;&lt;/f7-link&gt;
            &lt;/f7-nav-left&gt;
            &lt;f7-nav-title&gt;My App&lt;/f7-nav-title&gt;
            &lt;f7-nav-right&gt;
              &lt;f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right"&gt;&lt;/f7-link&gt;
            &lt;/f7-nav-right&gt;
          &lt;/f7-navbar&gt;
  
          &lt;f7-toolbar tabbar&gt;
            &lt;f7-link tab-link="#tab1"&gt;Tab 1&lt;/f7-link&gt;
            &lt;f7-link tab-link="#tab2"&gt;Tab 2&lt;/f7-link&gt;
          &lt;/f7-toolbar&gt;
  
          &lt;f7-tabs&gt;
            &lt;f7-tab id="tab1" tab-active&gt;Tab 1 content...&lt;/f7-tab&gt;
            &lt;f7-tab id="tab2"&gt;Tab 2 content...&lt;/f7-tab&gt;
          &lt;/f7-tabs&gt;
          &lt;!-- &lt;f7-block strong&gt;
            &lt;p&gt;Here is your blank Framework7 app. Let's see what we have here..&lt;/p&gt;
          &lt;/f7-block&gt; --&gt;
  
  
  
  
        &lt;/f7-page&gt;
      &lt;/f7-view&gt;
  
  
  
  
    &lt;/div&gt;
  
  
  
    &lt;!-- Form Page Template --&gt;
    &lt;!--&lt;template id="page-form"&gt;
    &lt;/template&gt;--&gt;
  
  
  
  
    &lt;!-- Cordova --&gt;
    &lt;!--
    &lt;script src="cordova.js"&gt;&lt;/script&gt;
    --&gt;
  
    &lt;!-- Framework7 library --&gt;
    &lt;script src="libs/framework7/js/framework7.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- Vue --&gt;
    &lt;script src="libs/vue/vue.min.js"&gt;&lt;/script&gt;
  
  
    &lt;!-- Framework7-Vue plugin --&gt;
    &lt;script src="libs/framework7-vue/framework7-vue.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- Your custom app scripts --&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;script src="js/conf.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js:</strong></p>
  
  <pre><code>// Init F7 Vue Plugin
  Vue.use(Framework7Vue, Framework7)
  
  // Init Page Components
  
  // Init App
  new Vue({
    el: '#app',
    // Init Framework7 by passing parameters here
    framework7: {
      root: '#app', // App root element
      id: 'io.framework7.testapp', // App bundle ID
      name: 'Framework7', // App name
      theme: 'auto', // Automatic theme detection
      // App routes
      routes: [
        {
          path: '/conf/',
          component: 'conf'
        }
      ],
    }
  });
  </code></pre>
  
  <p>it's okay?</p>
  
  <p><strong>conf.js:</strong></p>
  
  <pre><code>Vue.component('conf',{
      template:`
  
      &lt;f7-page&gt;
        &lt;f7-navbar title="Form" back-link="Back"&gt;&lt;/f7-navbar&gt;
        &lt;f7-block-title&gt;Form Example&lt;/f7-block-title&gt;
        &lt;f7-list form&gt;
          &lt;f7-list-item&gt;
            &lt;f7-label&gt;Dispositivo: {{dispositivo}}&lt;/f7-label&gt;
            &lt;f7-input type="text" name='dispositivo' placeholder="Dispositivo" v-model='dispositivo'&gt;&lt;/f7-input&gt;
          &lt;/f7-list-item&gt;  
        &lt;/f7-list&gt;
      &lt;/f7-page&gt;
  
      `,
      mounted(){
          console.log("Dispositivo: ",this.dispositivo)
      },
      data(){
          return{
              //Servidor de datos.
              dispositivo:'servidor', //Variable para saber de que dispositivo obtengo las coordenadas.
          }
      },
      methods:{
      }
  });
  </code></pre>
  
  <p>v-model does not work and I get the following message when changing the value: </p>
  
  <blockquote>
    <p><a href="https://i.stack.imgur.com/cKiRZ.png" rel="nofollow noreferrer">[object InputEvent]</a></p>
  </blockquote>