Weird Nuxt SSR issue

Collapsable.vue

<template>
  <div class="collapsable">
    <input
      :id="`${id}::collapsable-control`"
      :name="[`${group}`]"
      :type="[`${group ? 'radio' : 'checkbox'}`]" />

    <label
      v-on:click="handleClick"
      :for="`${id}::collapsable-control`">
      <slot name="control" />
    </label>

    <div :class="`collapsable-child ${childClasses}`">
      <slot name="child" />
    </div>
  </div>
</template>

<script>
import uuid from 'uuid/v4'

export default {
  methods: {
    handleClick: ({ target }) => {
      const controlID = target.getAttribute('for')
      const controlElement = document.querySelector(`[id='${controlID}']`)
      // eslint-disable-next-line
      console.log('controlElement', controlElement)

      if (controlElement && controlElement.checked) {
        controlElement.checked = false
      }
    },
  },

  props: {
    childClasses: {
      default: null,
      type: String,
    },
    group: {
      default: '',
      type: String,
    },
    id: {
      default: () => uuid(),
      type: String,
    },
  },
}
</script>

ExampleUsage.vue

<template>
  <Collapsable>
    <template v-slot:control>
      Label
    </template>

    <template v-slot:child>
      Content
    </template>
  </Collapsable>
</template>

<script>
import Collapsable from './Collapsable.vue'

export default {
  components: {
    Collapsable,
  },
}
</script>