title: How to update the browser's query string with nested properties in a Livewire component
body: <p>Here is an example of my component:</p>
  <pre class="lang-php prettyprint-override"><code>class ProductCatalogue extends Component
  {
      public array $filters = [
          'search' =&gt; '',
          'product-category' =&gt; '',
          'product-type' =&gt; '',
          'product-composition' =&gt; '',
          'product-size' =&gt; '',
          'min-price' =&gt; null,
          'max-price' =&gt; null,
      ];
  
      protected $queryString = ['filters'];
  
      public function render()
      {
          return view('livewire.product-catalogue', [
              'products' =&gt; Product::query()
                  -&gt;when($this-&gt;filters['product-category'], function ($query) { ... }
                  -&gt;when($this-&gt;filters['product-type'], function ($query) { ... }
                  -&gt;when($this-&gt;filters['product-composition'], function ($query) { ... }
                  -&gt;when($this-&gt;filters['product-size'], function ($query) { ... }
                  -&gt;when($this-&gt;filters['min-price'], function ($query) { ... }
                  -&gt;when($this-&gt;filters['max-price'], function ($query) { ... }
                  -&gt;when($this-&gt;filters['search'], function ($query) { ... }
                  -&gt;paginate(10)
          ]);
      }
  }
  </code></pre>
  <p>This works but then the query parameters are:</p>
  <p><code>?filters%5Bsearch%5D=&amp;filters%5Bproduct-category%5D=&amp;filters%5Bproduct-type%5D=&amp;filters%5Bproduct-composition%5D=&amp;filters%5Bproduct-size%5D=&amp;filters%5Bmin-price%5D=&amp;filters%5Bmax-price%5D=</code></p>
  <p>How can the <code>$queryString</code> property be set to output the following query parameters:</p>
  <p><code>?search=&amp;product-category=&amp;product-type=&amp;product-composition=&amp;product-size=&amp;min-price=&amp;max-price</code></p>
  <p>I've tried setting the <code>$queryString</code> property to:</p>
  <pre><code>protected $queryString = [
      'filters.search' =&gt; ['except' =&gt; ''],
      'filters.product-category' =&gt; ['except' =&gt; ''],
      'filters.product-type' =&gt; ['except' =&gt; ''],
      'filters.product-composition' =&gt; ['except' =&gt; ''],
      'filters.product-type' =&gt; ['except' =&gt; ''],
      'filters.min-price' =&gt; ['except' =&gt; null],
      'filters.max-price' =&gt; ['except' =&gt; null],
  ];
  </code></pre>
  <p>But that throws the following PropertyNotFoundException:
  <code>Property [$filters.search] not found on component</code></p>
  <p>Is it possible to do this or must each property be defined separately i.e. <code>public string $search;</code> etc.?</p>