Nuxt/Buefy -

I have a really weird issue in my Nuxt/Buefy project. I have a component, site-header, which loads a child component, user-location for client-side only use, like so:

components/site-header.vue

<template>
  <div class=header-wrapper>
    <div class=container>
      <b-navbar centered class=navbar>
        <template #end>
          <nav-link v-for='(obj, token) in $store.state.siteNav' :navItemObj=obj :key=token :id=token />
          <client-only>
            <user-location usage=siteHeader />
          </client-only>
        </template>
      </b-navbar>
    </div>
  </div>
</template>

The problem I've got is user-location shows momentarily on hot reload, but never shows when I load/refresh the page.

However, if I move it outside of b-navbar, it shows every time.

<template>
  <div class=header-wrapper>
    <div class=container>
    <nav-link v-for='(obj, token) in $store.state.siteNav' :navItemObj=obj :key=token :id=token />
    <client-only>
      <user-location usage=siteHeader />
      </client-only>
    </div>
  </div>
</template>

What could account for this? One thing which may or may not be related: this was working fine until I deleted my node_modules dir to reinstall everything.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW