title: how to append multiple query parameters in url - NuxtJS
body: <p>I am creating a nuxt ecommerce application. I have a situation where I have more than 10,000 items in a category and i want to create related filters for the products.
  My question is how do i append url (add &amp; remove query parameters) so that i can filter products.
  I have tried something like this by adding a <code>change</code> event to !</p>
  
  <pre><code>      &lt;ul&gt;
          &lt;li&gt;
            &lt;b-form-checkbox @change="filterProduct"&gt;
              &lt;label class="ui__label_checkbox"&gt;Apple&lt;/label&gt;
            &lt;/b-form-checkbox&gt;
          &lt;/li&gt;
           &lt;li &gt;
            &lt;b-form-checkbox @change="filterProduct"&gt;
              &lt;label class="ui__label_checkbox"&gt;Mango&lt;/label&gt;
            &lt;/b-form-checkbox&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  
  methods:{
    filterProduct() {
        this.$router.push({ query: Object.assign({}, this.$route.query, { random: "query" }) });
  
      },
  }
  </code></pre>
  
  <p>This approach <strong>does</strong> append the url only once but removes the checked state of the checkbox which i don't want </p>
  
  <p>I want similar to below everytime i click checkbox, it must retain the state of the checkbox at the same time append to the url</p>
  
  <pre><code>www.foobar.com/?first=1&amp;second=12&amp;third=5
  </code></pre>