title: VueJS Datepicker: dynamically change data based on month
body: <p>I am new to VueJS and I'm incorporating the <a href="https://github.com/krystalcampioni/vue-hotel-datepicker" rel="nofollow noreferrer"><code>vue-hotel-datepicker</code></a> library into my project.</p>
  
  <p><strong>Goal</strong>: change the <code>minNights</code> data property depending on the month. I was able to simply override that value as described in the <a href="https://github.com/krystalcampioni/vue-hotel-datepicker#minnights" rel="nofollow noreferrer">documentation</a>. </p>
  
  <p><a href="https://i.stack.imgur.com/Q3LpU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q3LpU.png" alt="enter image description here"></a></p>
  
  <p><strong>Problem</strong>: <code>minNights</code> should be 8 in August and July. When I use the Vue inspector, I can see that the <code>HotelDatePicker</code> component (imported from the library) has an 'activeMonthIndex', so I believe I should use that. But how can I access this data property from my parent? How can I dynamically change the <code>minNights</code> property based on the month? </p>
  
  <p><a href="https://i.stack.imgur.com/sm3TS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sm3TS.png" alt="enter image description here"></a></p>
  
  <p>My template:</p>
  
  <pre><code>&lt;datepicker
      :startDate="startDate"
      @check-in-changed="setCheckInDate"
      @check-out-changed="setCheckOutDate"
      :maxNights="21"
      :minNights="minNights" //dynamic based on month
      :checkIn="checkIn"
      :checkOut="checkOut"
      :disabledDates="bookedDates"
      :firstDayOfWeek="1"
      :i18n="lang"
      :showYear="true"
   &gt;
  </code></pre>
  
  <p></p>
  
  <p>I have made a <a href="https://gist.github.com/heleneshaikh/1fa634436826e4225433066e60049544" rel="nofollow noreferrer"><code>gist</code></a> for those who wish to see my code.
  Any guidance is much appreciated.</p>