title: Sorting a vue 3 v-for table composition api
body: <p>I have successfully created a table of my array of objects using the code below:</p>
  <pre><code>      &lt;div class=&quot;table-responsive&quot;&gt;
      
                  &lt;table  ref=&quot;tbl&quot; border=&quot;1&quot; class=&quot;table&quot;&gt; 
                      &lt;thead&gt;
               &lt;tr&gt;
                 
                  &lt;th  scope=&quot;col&quot; @click=&quot;orderby('b.property')&quot;&gt;Property&lt;/th&gt;
                   &lt;th  scope=&quot;col&quot;&gt; Price &lt;/th&gt;
                   &lt;th  scope=&quot;col&quot;&gt; Checkin Date &lt;/th&gt;
                   &lt;th  scope=&quot;col&quot;&gt; Checkout Date &lt;/th&gt;
                   &lt;th scope=&quot;col&quot; &gt; Beds &lt;/th&gt;
               &lt;/tr&gt;
           &lt;/thead&gt;
           &lt;tbody&gt;
              &lt;tr scope=&quot;row&quot; class=&quot;table-bordered table-striped&quot; v-for=&quot;(b, index) in properties&quot; :key=&quot;index&quot;&gt;
                  
                  &lt;td&gt; {{b.property}} &lt;/td&gt;
                  &lt;td&gt; {{b.pricePerNight}}&lt;/td&gt;
                  &lt;td&gt; {{b.bookingStartDate}} &lt;/td&gt; 
                  &lt;td&gt; {{b.bookingEndDate}} &lt;br&gt; {{b.differenceInDays}} night(s)  &lt;/td&gt; 
                  &lt;td&gt; {{b.beds}} &lt;/td&gt; 
      
              &lt;/tr&gt;
           &lt;/tbody&gt;
       &lt;/table&gt;
        &lt;/div&gt;
  
  
      &lt;script&gt;
  
      import {ref} from &quot;vue&quot;;
      import { projectDatabase, projectAuth, projectFunctions} from '../../firebase/config'
      import ImagePreview from &quot;../../components/ImagePreview.vue&quot;
      
      export default {
        components: {
          ImagePreview
        },
        setup() {
      
      const properties = ref([]);
      
      //reference from firebase for confirmed bookings
             const Ref = projectDatabase .ref(&quot;aref&quot;).child(&quot;Accepted Bookings&quot;);
                  Ref.on(&quot;value&quot;, (snapshot) =&gt; {
            properties.value = snapshot.val();
          
          });
  
          //sort table columns
         const orderby = (so) =&gt;{
          desc.value = (sortKey.value == so)
          sortKey.value = so
          }
        
           return {
            properties,
  orderby
          };
        },
      };
      &lt;/script&gt;
  </code></pre>
  <p>Is there a way to have each column sortable alphabetically (or numerically for the numbers or dates)? I tried a simple @click function that would sort by property but that didn't work</p>