Re-render a Vue.js component -

is there way re-render vue.js component? have dropdown list , form. both of seperate components, 1 located @ header , 1 one somewhere in middle of page.

both seperate components , can't make 1 child component of another.

so possible trigger re render of dropdown in vuejs ?

if assume project list list component sent component via prop, it's trivial update main app's list, in hand update list component.

quick example of how work:

<div id="app"> <!-- app -->     <list :projects="projectslist"></list> <!-- list component -->     <add-project></add-project> <!-- project add component --> </div>  <template id='project-list-template'> <!-- template list projects -->     <div v-for="proj in projects">{{proj}}</div> </template> <template id="add-project-template"> <!-- template add project -->     <input v-model='projectdata.name'/><button v-on:click="saveproject()">save</button> </template>  <script>      // init components     var projectlistcomponent = vue.extend({         props: ['projects'],         template: '#project-list-template'     });     var addprojectcomponent = vue.extend({         template: '#add-project-template',         data: function() {             return {                 projectdata: {                     name:'test'                 }             }         },         methods: {             saveproject:function() {                 this.$root.appendprojecttolist(this.projectdata); // target app's function             }         }     });      // register components     vue.component('list', projectlistcomponent);     vue.component('add-project', addprojectcomponent);      // app stuff     new vue({         el: '#app',         data: {             projectslist: ['projectx','projecty']         },         methods: {             appendprojecttolist: function(project) {                 this.projectslist.push(project.name);             }         }     }); </script> 

if not case, should really add simplified code example.