Can't access element client side via this.$refs

[tettoffensive]

<client-only>
    <vue-bootstrap-typeahead 
      class="ctl" 
      :type="type" 
      :data="typeahead" 
      :id="name" 
      :name="name" 
      ref="inputRef" 
      :minMatchingChars="1" 
      :value="value" size="lg" 
      @hit="updateValue" 
      @input="updateValue">
    </vue-bootstrap-typeahead>
    <input 
      class="form-control form-control-lg ctl form-control" 
      :type="type" 
      slot="placeholder" 
      :name="name" 
      ref="inputPlaceholderRef" 
      :value="value" />
</client-only>

I'm using the client-only that Nuxt imports. I have a component that only works client side vue-bootstrap-typeahead so I've wrapped it in client-only and filled the placeholder slot with a normal input. Problem is I was setting this.$refs.inputRef.value = value on the client side but the this.$refs doesn't include inputRef. inputPlaceholderRef does show up, however.

Is there a way in which this could work? In the meantime, maybe there is a work around?

[tmorehouse]

When on the client, there is a one $nextTick delay before the client markup is rendered, so you need to delay your access to this.$refs.inputRef in a this.$nextTick(...):

export default {
  mounted() {
    // this.$refs.inputRef doesn't exist yet
    this.$nextTick(() => {
      // But now it does
      this.$refs.inputRef.value = 'foo'
    })
  }
}

[JoshMoreno]

@tmorehouse @tettoffensive
I had to do 2 $nextTicks or put the <client-only></client-only> in a parent component.
Not sure if this is an issue with this package or the vue-awesome-swiper package.

Solution 1: wait 2 ticks

mounted() {
    this.$nextTick(() => {
        this.$nextTick(() => {
            this.$refs.mainGallery.swiper.controller.control = this.$refs.thumbGallery.swiper
            this.$refs.thumbGallery.swiper.controller.control = this.$refs.mainGallery.swiper
        })
    })
}

Solution 2: parent component

// parent
<template>
    <client-only>
        <Child v-bind="$attrs"/>
    </client-only>
</template>

// child
<template>
    <stuff-here/>
</template>

<script>
    export default {
        mounted() {
            this.$refs.mainGallery.swiper.controller.control = this.$refs.thumbGallery.swiper
            this.$refs.thumbGallery.swiper.controller.control = this.$refs.mainGallery.swiper
        }
    }
</script>