title: How to Two-way Data Binding Between Parents and grandchildren in Vue.js
body: <p>I faced a problem, I solve it by cookies but I want to solve the problem without cookies. I have a component which called app-header and It has another component which called outmodal.
  Now, My first Vue instance require component app-header.</p>
  
  <pre><code>var vue = new Vue({
      el : "html",
      data : {
          title       : "Site Title",
          description : "description of page",
          keywords    : "my keywords",
          view        : "home",
          login       : "login"
      },
      components:{
          "app-header" :require("../../components/header"),
          "app-footer" :require("../../components/footer"),
          "home"       :require("../../views/home")
      },
  });
  </code></pre>
  
  <p>code of app-header </p>
  
  <pre><code>var Vue     = require("vue");
  
  Vue.partial("login",require("../../partials/login.html"));
  Vue.partial("logged",require("../../partials/logged.html"));
  
  module.exports = {
      template    : require("./template.html"),
      replace     : true,
      components  : {
          outmodal : require("../outmodal")
      },
      props : ['login']
  }
  </code></pre>
  
  <p>code of outmodal</p>
  
  <pre><code>var Vue = require("vue");
  Vue.partial("loginModal",require("../../partials/loginModal.html"));
  
  module.exports = {
      template    : require("./template.html"),
      replace     : true,
      props       : ['name'],
      data        : function () {
              return  {
                  userLogin : { mail  :   "", password    :   "", remember    :   ""}
              }
  
      },
      methods : {
          formSubmit : function(e){
                  e.preventDefault();
                  this.$http.post("http://example.com/auth/login",{ "email": this.userLogin.mail , "password": this.userLogin.password },function(data,status,request){
                      $.cookie("site_token",data.token,{expires : 1})
                  }).error(function(data,status,request){
  
                  });
  
          }
      }, ready  : function(){
          console.log("it works")
      }
  }
  </code></pre>
  
  <p>In outmodal component I connect the API and I check the login, If login will be  succesfull, I want to change value of login variable in my Vue instance. I use web pack to build all requires. So I don't know how can I data binding between these files.</p>
  
  <p>How can I solve It? I</p>