title: Unable to unsort the table by clicking the column - Vue.js
body: <p>As I shifted from Laravel Livewire to Laravel Vue, I am unable to recreate the logic required for sorting in Vue. I am successfully able to sort the table by clicking the table header. Now, what I need here is, as when the <code>sortDirection</code> is 'desc', the click after that should unsort the column just like in the Livewire Component example shown below. Please help me achieve this in vue.</p>
  <p>User Index Vue Component - Current Behavior</p>
  <p><a href="https://i.stack.imgur.com/o5gD7.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o5gD7.gif" alt="enter image description here" /></a></p>
  <p>User Index Livewire Component - Required Behavior</p>
  <p><a href="https://i.stack.imgur.com/mMKUv.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mMKUv.gif" alt="enter image description here" /></a></p>
  <p>User Index Vue Component - Script</p>
  <pre><code>&lt;script&gt;
      export default {
          props : ['users'],
          data() {
              return {
                  sortField: '',
                  sortDirection: 'asc'
              }
          },
          methods: {
              sortBy: function(column) {
                  if (column === this.sortField) {
                      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                  } else this.sortDirection = 'asc';
                  this.sortField = column;
              }
          },
          computed:{
              sortedUsers: function() {
                  return this.users.sort((a, b) =&gt; {
                      let modifier = 1;
                      if (this.sortDirection === 'desc') modifier = -1;
                      if (a[this.sortField] &lt; b[this.sortField]) return -1 * modifier; 
                      if (a[this.sortField] &gt; b[this.sortField]) return 1 * modifier;
                      return 0;
                  });
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>User Index Vue Component - Template</p>
  <pre><code>&lt;template #head&gt;
      &lt;data-table-heading sortable :direction=&quot;sortField === 'id' ? sortDirection : null&quot; @click=&quot;sortBy('id')&quot; class=&quot;pr-0&quot;&gt;ID&lt;/data-table-heading&gt;
      &lt;data-table-heading sortable :direction=&quot;sortField === 'name' ? sortDirection : null&quot; @click=&quot;sortBy('name')&quot;&gt;Name&lt;/data-table-heading&gt;
      &lt;data-table-heading sortable :direction=&quot;sortField === 'email' ? sortDirection : null&quot; @click=&quot;sortBy('email')&quot; class=&quot;w-screen&quot;&gt;Email&lt;/data-table-heading&gt;
      &lt;data-table-heading sortable :direction=&quot;sortField === 'role' ? sortDirection : null&quot; @click=&quot;sortBy('role')&quot;&gt;Role&lt;/data-table-heading&gt;
      &lt;data-table-heading sortable :direction=&quot;sortField === 'created_at' ? sortDirection : null&quot; @click=&quot;sortBy('created_at')&quot;&gt;Date&lt;/data-table-heading&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Data Table Heading Vue Component - Template</p>
  <pre><code>&lt;span class=&quot;relative flex items-center&quot;&gt;
      &lt;div v-if=&quot;direction === 'asc'&quot;&gt;
          &lt;svg class=&quot;w-3 h-3&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
              &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M19 9l-7 7-7-7&quot;&gt;&lt;/path&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
      &lt;div v-else-if=&quot;direction === 'desc'&quot;&gt;
          &lt;svg class=&quot;w-3 h-3&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
              &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M5 15l7-7 7 7&quot;&gt;&lt;/path&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
      &lt;div v-else&gt;
          &lt;svg class=&quot;w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
              &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M5 15l7-7 7 7&quot;&gt;&lt;/path&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/span&gt;
  </code></pre>
  <h3>Edit</h3>
  <p>Livewire Component Sorting</p>
  <pre><code>public $sorts = [];
  
  public function sortBy($field)
  {
      if (! isset($this-&gt;sorts[$field])) return $this-&gt;sorts[$field] = 'asc';
  
      if ($this-&gt;sorts[$field] === 'asc') return $this-&gt;sorts[$field] = 'desc';
  
      unset($this-&gt;sorts[$field]);
  }
  </code></pre>