title: vue.js API Call with Dynamic schema
body: <p>I have used AXIOS for fetching data from my API, it takes some extra time to get the data, have used CREATED hook point to call the API. </p>
  
  <pre><code>&lt;template&gt;
   &lt;div&gt;
       Period
      {{This.GetPeriod()}} 
      &lt;/div&gt;
  &lt;/template&gt;
  
  
  data:function(){
    APIData:{}
  },
  created :{
     GetData:function(){
         ---- AXIOS get call
     }
  },
  methods:{
    GetPeriod:function(){
      return this.ApiData.StartDate+":'+ApiData.EndDate 
    }
  }
  </code></pre>
  
  <p>Now I am getting below exception :</p>
  
  <ol>
  <li>StartDate and Endate is undefined.</li>
  <li>The GetPeriod Method runs earlier then Created hook. that is the reason the startDate and EndDate is undefined. as that is the property in the data which which will be assigned in APIData after API call.</li>
  <li><p>My whole code runs 2 times. </p>
  
  <pre><code>{
  "Banners":[{ some properties  }],
  "Links":[{ some properties  }],
  "Widgets":[{ properties }],
  "Layouts":{
    "LayoutName":"Layout4",
    "ContentDefinitionID":"9",
    "PlaceHolderID":"",
    "DisplayOrder":"",
    "Type":"EmployeeLanding",
    "StartDate":null,
    "EndDate":null,
    "VariantID":"EFDD2115",
    "Status":null,
    "Audience":{  
       "Groups":[],
       "Segments":[ ],
       "PopupMode":0,
       "ErrorMessage":null
    },
    "PopupMode":0,
    "ErrorMessage":null
  }
  </code></pre>
  
  <p>}</p></li>
  </ol>
  
  <p>The startDate and EndDate is in the Layout property so Do I need to create the schema on my Vue.js or can be managed dynamically so that it do not give exception of undefined . 
  Also the code is running 2 times.</p>