title: Using instance as VueJS data
body: <p>First of all, sorry for my bad english.</p>
  <p>My question is: Can I use an instance as data in the VueJS?</p>
  <p>Take a look at these two ways of update the User's name.</p>
  <pre class="lang-js prettyprint-override"><code>    const vue = new Vue({
          data(){
              return {
                  user: {
                      name: 'Denis Wilton',
                  },
              }
          },
          methods: {
             updateUserName(newName) {
                this.user.name = newName;
             }
          }
      })
  </code></pre>
  <pre><code>&lt;button @click=&quot;updateUserName('Foo Bar')&quot;&gt;Change name to Foo Bar&lt;/button&gt;
  </code></pre>
  <p>In the above way, I can create an event that calls the method &quot;updateUserName('Foo Bar')&quot; passing the newName as param.</p>
  <p>Ok! But... What if I create an user instance from the User class, that by yourself carries the method updateName, like this:</p>
  <pre class="lang-js prettyprint-override"><code>//@/classes/User.js
  //Class User
  class User {
       
       constructor(name) {
          this.name = name;
       }
  
       updateName(newName) {
          this.name = newName;
       }
  }
  
  
  //////////////////////////////
  
  const vue = new Vue({
        data(){
           return {
               user: new User('Denis Wilton'), //Here I instantiated my user class, that owns the 'updateUser' method implicitly.
           }
        }
  });
  
  </code></pre>
  <p>In the above example, I can use an event that calls the User's method &quot;updateName&quot; for updating my data, and have no need to code the method at VueJS component's script.</p>
  <pre><code>&lt;button @click=&quot;user.updateName('Foo Bar')&quot;&gt;Change name to Foo Bar&lt;/button&gt;
  </code></pre>
  <p>Am I sinning to do this? LOL</p>