How can I use object props in Vue.js?

Question

The vue.js documentation has this as an example:

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

However, initialCounter works in my template, but counter does not.

What am I doing wrong?

Here's the full code:

<update-counter initialCounter="1" inline-template>
    <div>
        <div class="panel panel-default">
            <div class="panel-heading">My Counter @{{ initialCounter }}</div>

Edit: I narrowed down my issue. If I pass a variable like this it works:

<update-partner :initial-counter="1" inline-template>

But if I pass an object, it doesn't work:

<update-partner :initial-counter="users" inline-template>

When I pass that object, initialCounter works in my template, but counter does not.

When I pass an integer, both variables work.

What do I need to do differently when I pass an object?

Answer 1

So the problem is occurring as when you are doing following in the component:

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

You are assigning counter initial value of initialCounter, which you change later in mounted block. If you need to change value to set in counter, you have to set a watcher on initialCounter, like following:

  watch:{
    initialCounter: function(newVal){
      this.counter = newVal;
    }
  }

You can see working fiddle.