title: DOM is not updating when props value changes in Vuejs
body: <p>I have a parent and a child. In the parent am passing 3 variables as props to the child. In the Child I am using the <strong>watch()</strong> to look for varaible changes. When the child is created for the 1st time the <strong>watch</strong> works as expected but when the data from the props in updated then DOM of the child is not updated. The watch function which is looking for data change of the variable is not running at all.</p>
  
  <p>Here is my code. Its a bit lengthy so please bear with it.</p>
  
  <p><strong><em>Parentcomponent.vue</em></strong></p>
  
  <pre><code> &lt;template&gt;
   &lt;div&gt;
  
  
   &lt;button type="button" v-on:click="LoadCatalog()"&gt;Click me!! &lt;/button&gt;
  
   &lt;div v-if="displayCategoryList" class="row"&gt;
      &lt;h3&gt;Select Category Men&lt;/h3&gt;
      &lt;select v-model="menCategory" v-on:change="passDataToChild()"&gt;
          &lt;option v-for="item in categoriesfordisplay.men"  v-bind:key="item"&gt;
              {{ item }}
          &lt;/option&gt;
      &lt;/select&gt; 
      &lt;h3&gt;Select Category Women&lt;/h3&gt;
      &lt;select v-model="WomenCategory" v-on:change="passDataToChild()"&gt;
          &lt;option v-for="item in categoriesfordisplay.women" v-bind:key="item"&gt;
              {{ item }}
          &lt;/option&gt;
      &lt;/select&gt; 
   &lt;/div&gt;
  
   &lt;div v-if="displayData" class="row"&gt;
  
          &lt;div v-for="item in data_to_show_on_mainpage"  v-bind:key="item" &gt;
              &lt;button v-on:click="newfunction(item.cat,item.gender)" &gt;
                  &lt;img v-bind:src="item.data.image"&gt; &lt;/img&gt;
                  &lt;p &gt;{{ item.cat }}&lt;/p&gt;
              &lt;/button&gt;
           &lt;/div&gt;
  
  
  
   &lt;/div&gt;
  
   &lt;category-items v-if="displayCategoryData" v-bind:gender="gender" v-bind:catsgory="catsgory" v-bind:catlog="catlog" &gt;&lt;/category-items&gt;
  
  
  
  
  
   &lt;/div&gt;
   &lt;/template&gt;
  
  
  &lt;script&gt;
    import axios from 'axios'
    import CategoryItems from './CategoryItems'
     export default {
     name:  'GetCategoryItemsAndDisplayOne',
     props: ['categoriesfordisplay','ismainpage', 'catalogselected'],
  
  components:{
      CategoryItems,
      },
      data(){
      return {
          IsMainPage_1 : "",
          data_to_show_on_mainpage : [],
          cat :[],
          displayData : true,
          menCategory : "",
          WomenCategory : "",
          displayCategoryList: true,
          displayCategoryData : false,
          CategoryFromImage : "",
          //dataSentToChild : {}
          gender : "",
          catsgory : "",
          catlog : ""
  
  
      }
    },
       methods:{
      passDataToChild(){
          if(this.menCategory != ""){
  
              this.catsgory = this.menCategory
              this.gender = "men"
              this.catlog = this.catalogselected
              this.menCategory = "" 
  
          }else if(this.WomenCategory != ""){
              this.catsgory = this.WomenCategory
              this.gender = "women"
              this.catlog = this.catalogselected
              this.WomenCategory = ""
          } 
          this.displayData = false
          this.displayCategoryData = true
      },
      changevalue(){
          this.data_to_show_on_mainpage = []
      },
      CatlogService(catlog_name,category,gender,mainpage){
  
  
          let url = "http://localhost:5000/xyz/" + (this.catalogselected).replace(/'/g,"%27") +"/api/"+ (gender) + "/catalogvis/" + (category) +"/items"
  
          axios.get(encodeURI(url)).then((resp)=&gt;{
              var jsonData = {"data": resp.data.response.Results.results[0] , "cat": category , "gender" : gender}
              )
              this.data_to_show_on_mainpage.push(jsonData)
  
          })
          .catch(err =&gt; {
              console.log("we got an error the url is " + url)
              console.log(err);
          })
      },
  
      GetItemsToShowonMainPage(){
          this.changevalue()
  
  
          if(this.categoriesfordisplay.men_for_display.length&gt;0){
              for(let i =0;i&lt;this.categoriesfordisplay.men_for_display.length;i++){
                  let category = this.categoriesfordisplay.men_for_display[i].replace(/"/g,"%27");
                  console.log(category)
                  this.CatlogService(this.catalogselected,category,'men',this.ismainpage)
              }
  
          }
          if(this.categoriesfordisplay.women_for_display.length&gt;0){
  
              for(let i = 0;i&lt;this.categoriesfordisplay.women_for_display.length;i++){
                  let category = this.categoriesfordisplay.women_for_display[i].replace(/"/g,"");
  
                  this.CatlogService(this.catalogselected,category,'women',this.ismainpage)
              }
  
          }
      },
      LoadCatalog(){
          this.displayCategoryData = false
          this.GetItemsToShowonMainPage()
          this.displayData = true
          this.displayCategoryList = true
  
      },
      newfunction(Cats,gender){
          this.displayCategoryData = true
          this.displayData = false
          this.catsgory = Cats
          this.gender = gender
          this.catlog = this.catalogselected
      }
  
  
  
  },
  created(){
  
      this.GetItemsToShowonMainPage()
  }
  
  
  
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>The <strong><em>Child component CategoryItems.vue</em></strong> is below</p>
  
  <pre><code>&lt;template&gt;
  
  &lt;div&gt;
      &lt;h4&gt;{{ genders }}&lt;/h4&gt;
      &lt;h4&gt;{{ category }}&lt;/h4&gt;
      &lt;h4&gt;{{ catalogue }}&lt;/h4&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  
  
  export default{
  name : 'CategoryItems',
  props : ['gender','catsgory','catlog'],
  
  
  
  data(){
      return {
          genders : "",
          category : "",
          catalogue : "",
  
      }
  },
  watch : {
      category : function(){
  
          this.GetProducts()
      }
  },
  methods:{
      GetProducts(){
      this.genders = this.gender
      this.category = this.catsgory
      this.catalogue = this.catlog
  
      }
  },
  created(){
      this.genders = this.gender
      this.category = this.catsgory
      this.catalogue = this.catlog
  
  
   }
  
   }
   &lt;/script&gt;
  
  
   &lt;style&gt;
   &lt;/style&gt;
  </code></pre>
  
  <p>As You can see whenever the <strong><em>category</em></strong> variable in the child changes the function <strong>GetProducts</strong> should run but it is not happening.
  It is executed only when the  child component is created.</p>
  
  <p>Where I am going wrong with my logic.
  Thanks       </p>