[Vuejs]-How I Can Change The Another Component Data on VueJS

Since this is a parent -> child communication, you can very simply use props:

• Store blocks on the parent component.
• Pass blocks as a prop to bar component.
• Do any additional processing using computed properties.
• Display data using child’s template.

Here’s some guiding:

1. Define your component with props:

    Vue.component('bar', {
        template: `<div class="bar">{{blocks.length}}</div>`,
        props: ['blocks']
    });
   

2. Define blocks on the parent (in your example, the main vue component):

    new Vue ({
        el: '#app',
        data: {
            blocks: []
        },
        methods: {
            add: function() {
                // do something with blocks
            }
        }
    });
   

3. Pass data down to the component:

    <bar :blocks="blocks"></bar>