Vue Propsdata Not Updating Dynamically

I've been struggling with this issue for hours: I've instantiated dynamically a child vue component inside a parent component, and passed in propsData some of the parent's data. Th

Solution 1:

From the docs:

Pass props to an instance during its creation. This is primarily intended to make unit testing easier.

Setting propsData does not create a parent-child relationship. It simply provides (non-reactive) data to the component. In short, you've chosen a not-very-Vue approach. You shouldn't be concerned with creating components, you should have data items in your viewmodel that Vue then creates components for.

exportdefault {
    name: 'app',
    components: { Button },
    data(){
      return {
        type: 'secondary',
        buttons: []
      };
    },
    methods: {
      onClick() {
        this.buttons.push(true);
        if(this.type === 'primary'){
          this.type = 'secondary';
        } else {
          this.type = 'primary';
        }
      }
    }
  }

and

<divref="container"><button @click="onClick">Click to insert</button><Buttonv-for="b in buttons":type="type">Click me!</Button></div>

Fixed demo