title: Get props from another state in Vue
body: <p>Here I have 2 routes, namely appointment &amp; doctors. In doctors, I want when the <code>Book Now</code> button (image-1) is clicked, then the parameters in it replace the value of the select option (image-2)</p>
  <p><strong>My routes:</strong></p>
  <pre><code>const router = new VueRouter({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'appointment',
        component: Appointment
      },
      {
        path: '/doctors',
        name: 'doctor',
        component: Doctor
      },
    ],
  })
  </code></pre>
  <p><strong>Image-1 view:</strong> doctors, here displays the doctor's data.</p>
  <p><a href="https://i.stack.imgur.com/k14wL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k14wL.png" alt="enter image description here" /></a></p>
  <p><strong>Image-1 code:</strong> when the button is clicked, it will move to the route appointment &amp; replace the value of the select option based on the parameters sent, here my code:</p>
  <pre><code>&lt;router-link :class=&quot;['btn btn-sm btn-success ml-1 p-1']&quot; :to=&quot;{ 
      name: 'appointment', 
      params: {   
                  book_hospital_id: item.hospitals.id, 
                  book_specialist_id: item.specialists.id , 
                  book_doctor_id: item.doctors.id  
              } 
  }&quot;&gt;Book Now&lt;/router-link&gt;
  </code></pre>
  <p><strong>Image-2 view:</strong> params sent will replace the select option as shown below.</p>
  <p><a href="https://i.stack.imgur.com/hDhNa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hDhNa.png" alt="enter image description here" /></a></p>
  <p><strong>Image-2 code:</strong></p>
  <pre><code>data: function () {
      return {
          optHospital: '',
          optSpeciality: '',
          optDoctor: '',
      }
  },
  </code></pre>