Vue components in shopify with liquid

I am working in shopify and they use liquid so I am importing vue over a cdn

I have the following code:

function collectionApp() {
  const { createApp } = Vue
  
  const collection_vm = createApp({}).mount('#collection')

   Vue.component('button-counter', {
     data() {
       return {
          count: 0
        }
      },
      template: `
         <button @click="count++">{{ count }}</button>
      `
   })
}


document.addEventListener('DOMContentLoaded', e => {
  collectionApp()
})

<div id="collection">
  <button-counter></button-counter>
</div>

With the above code nothing happens, I don’t know if I am doing this wrong or if it is because shopify is server side rendered.