title: Issue in synchronized dynamic list with requested list from the server (VueJs)
body: <p>I have a dynamic list [ Where I create an array, and when the user input any text it creates a new project for him and print it with the other project on the screen ].</p>
  
  <p>When the page is open (loaded for the first time) the program will send HTTP request for the server to bring all projects for the current user and print them .. and the same page I have an input field and all projects for the current user are listed down. when the user tries to add a new project to his list, the HTTP request is successfully added to the list [but not shown in the page, if I refresh the page then the new project added to the list]</p>
  
  <p>My code as following:</p>
  
  <p>In <code>&lt;script&gt;</code>:</p>
  
  <pre><code>    export default {
        name: "Projects",
        data: function() {
            return {
              Projects: [],
              ProjectName:'',
              Username:''
            }
        },
        created(){
          this.GetAllProjects(); //print all Projects.
        },
        methods: {
  
          CreateNewProject: function() {
  
            var app = this; var idNo = XXXXX; var username= XXXXX;
  
            axios({
              method: "post",
              timeout: 3000,
              headers: {
                                 .......
              },
              url: "XXXXXXX", data: {
                name: app.ProjectName,
                username: username,
              }
            }) 
            .then(function(response) {
              console.log(response);
              app.ProjectName = "";
  
            })
            .catch(function(error) {
              console.log(error);
            });
          },
          GetAllProjects: function(){
  
            var app = this; app.id = XXXX; app.Username= XXXX;
  
            const instance = axios.create({
              timeout: 3000,
              headers: {
                             ......
              }
            });
            instance.get("XXXXX")
              .then( function(response) {
                console.log(response);
  
                Object.keys(response.data.result).forEach( function (product) {
                  console.log(response.data.result[product]);
                  console.log('product number: ' + product);
  
                  var subscribersCounter = 0;
  
                  //Save the response required results into a struct. 
                  let example = {
                    name: response.data.result[product].name,
                    id: response.data.result[product].id,
                    subscribers: response.data.result[product].subscribers,
                    products: response.data.result[product].products,
                  };
  
                  //Create an object for the current Project.
                  let uploadedExample = {
                    name: '',
                    id: '',
                    subscribers: '',
                    products: {name:'',color:''},
                  };
  
                  uploadedExample.name = example.name; //name of the current workspace.
                  uploadedExample.id = example.id; //id of the current workspace.
  
                  //Check if the subscribers empty or not, if not empty count the available subscribers.
                  if ( example.subscribers ) {
                    Object.keys(example.subscribers).forEach(function (key) {
                      subscribersCounter++;
                    });
                  }
  
                  uploadedExample.subscribers = subscribersCounter; //subscribers No. of the current workspace.
                  console.log("Total subscribers: " + uploadedExample.subscribers);
  
                  //Check if the products empty or not, if not empty count the available products.
                  if ( example.products ) {
                    Object.keys(example.products).forEach(function (Pkeys) {
                      uploadedExample.products.name = Pkeys; //name of the product in the current workspace.
                      Object.keys(example.products[Pkeys]).forEach(function (key) {
                        if (key == 'color') {
                          uploadedExample.products.color = example.products[Pkeys][key]; //color of the product in the current Project.
                        }
                      });
                    });
                  }
  
                  //add the new workspace to the list of Projects.
                  app.Projects.push(uploadedExample);
  
                });
  
              })
              .catch(function(error) {
                console.log(error);
              });
  
  
          }
        }
      }
  </code></pre>
  
  <p>In <code>&lt;tamplete&gt;</code>:</p>
  
  <pre><code>&lt;b-col v-for="(project,index) in Projects" :key="index"&gt;
              &lt;b-row&gt;&lt;h1&gt; {{project.name}} &lt;/h1&gt;&lt;/b-row&gt;
  ..........
  </code></pre>
  
  <p><strong>What I did is:</strong></p>
  
  <p>when the page loads the process of getting all projects for the currents user is work, and print them on the screen. and when the user tries to add a new project it is done successfully. the only thing is when he added the project I want to send the HTTP request and at the same time is adding this project on the list printed on the screen without the user needs to refresh the page.</p>
  
  <p><strong>Note:</strong> I've use <code>location.reload();</code> but not that what I want.</p>
  
  <p><strong>Note:</strong> I need to get all projects from the HTTP request because I need for some data to processing them, so adding the project name to the array of projects to be printed on the screen will not help me.</p>