I am a newcomer to vue.js, but I have some experience with React from before.

I have read the vue guidelines and I am trying to understand vue through the concepts from React.

I assume that the vue data is similar to the React state, since when it updates the app it will render the page again.

So I would like to do something like ... (the code is in React)

this.setState(Object.assign({}, this.state, { key1: 'value1', key2 : 'value2'}))

But as far as I know, in vue:

this.key1 = 'value1';

this.key2 = 'value2';

Is that correct? I guess vue will render twice since it is 2 statements.
How could I set multi values at once?

I have already tried ...

// not working

this.$set(Object.assign({}, thisRef.data, { key1: 'value1', key2: 'value2' }))



// not working

this.data = { key1 : 'value1', key2: 'value2' };

In the second one, data has changed - I have printed value with console.log(this)- , but it does not render again.

FYI, the full code from the vue template is here. Code review and correction will be very welcomed.

<script>

    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 <= 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}));

            }

        }

    }

</script>

============ Edition ===========

react this.state and vue this.data is not same, right?
To me, main confusion starts from that point.

In vue

export default {

  data : function() {

    return {

      foo : 'bar'

    }

  }

}

and

In react

constructor() {

  super()

  this.state = {

    foo : 'bar'

  }

}

are completely different concept, right?