title: How to pass props to form in another component in Vue
body: <p>I am trying somehow to pass pre-defined form data via $router.push, so when that link is clicked, some pre-defined data/props should be defined in the form like dropdrown or just pass some data into input form</p>
  
  <p>I tried different methods, but nothing made it work, can someone please help me?</p>
  
  <p>Input in another Vue component where I want to pass data: </p>
  
  <pre><code>&lt;input type="text" name="" value=""&gt;
  </code></pre>
  
  <p>Click Router: </p>
  
  <pre><code>&lt;ul&gt;
    &lt;li @click="clickRouter(path)"&gt; Click here &lt;/li&gt;
  &lt;/ul&gt;
  
  data() {
      return {
        path: '/products',
      };
    },
    methods: {
      clickRouter(link) {
        this.$router.push(link);
      },
    },
  </code></pre>
  
  <p>Update:
  According to <a href="https://router.vuejs.org/en/essentials/navigation.html" rel="nofollow noreferrer">Programmatic Navigation</a> you can do this: </p>
  
  <pre><code>// with query, resulting in /register?plan=private
  router.push({ path: 'register', query: { plan: 'private' }})
  </code></pre>
  
  <p>now this URL ?plan=private I want to be able to do something like <code>/register?name=Myname</code></p>
  
  <p>And this shall prefill the name input in the component.</p>
  
  <p>Cheers</p>