title: vue.js: how to update state with object?
body: <p>I am a newcomer to vue.js, but I have some experience with React from before.</p>
  
  <p>I have read the vue guidelines and I am trying to understand vue through the concepts from React.</p>
  
  <p>I assume that the vue <code>data</code> is similar to the React <code>state</code>, since when it updates the app it will render the page again.</p>
  
  <p>So I would like to do something like ... (the code is in React) </p>
  
  <pre><code>this.setState(Object.assign({}, this.state, { key1: 'value1', key2 : 'value2'}))
  </code></pre>
  
  <p>But as far as I know, in vue:</p>
  
  <pre><code>this.key1 = 'value1';
  this.key2 = 'value2';
  </code></pre>
  
  <p>Is that correct? I guess vue will render twice since it is 2 statements.
  How could I set multi values at once?</p>
  
  <p>I have already tried ...</p>
  
  <pre><code>// not working
  this.$set(Object.assign({}, thisRef.data, { key1: 'value1', key2: 'value2' }))
  
  // not working
  this.data = { key1 : 'value1', key2: 'value2' };
  </code></pre>
  
  <p>In the second one, data has changed - I have printed value with <code>console.log(this)</code>- , but it does not render again.</p>
  
  <p>FYI, the full code from the vue template is here. Code review and correction will be very welcomed.</p>
  
  <pre><code>&lt;script&gt;
      export default {
          layout: 'reactQuickly'
          , data: function(){
              return {
                  time: null
                  , init: null
              }
          }
          , methods: {
              startTimer: function(time){
                  clearInterval(this.init);
                  let thisRef = this;
                  let interval = setInterval(
                      function(){
                      console.log('2: Inside of interval', time)
                      let timeLeft = thisRef.time - 1;
                      if(timeLeft &lt;= 0) clearInterval(interval);
                      thisRef.time = timeLeft;
                      // thisRef.$set(Object.assign({}, thisRef.data, { time: timeLeft }))
                      console.log('thisRef', thisRef, this);}
                  , 1000);
                  console.log('1: After interval');
                  // this.data = { time : time, init: interval };
                  this.time = time;
                  this.init = interval;
                  console.log('this.data', this.data);
                  // this.$set(Object.assign({}, this.data, { time : time, init: interval}));
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>============ Edition ===========</p>
  
  <p>react <code>this.state</code> and vue <code>this.data</code> is not same, right?
  To me, main confusion starts from that point.</p>
  
  <p>In vue</p>
  
  <pre><code>export default {
    data : function() {
      return {
        foo : 'bar'
      }
    }
  }
  </code></pre>
  
  <p>and </p>
  
  <p>In react</p>
  
  <pre><code>constructor() {
    super()
    this.state = {
      foo : 'bar'
    }
  }
  </code></pre>
  
  <p>are completely different concept, right?</p>