With Options API, $subReady is not working when subscribing outside of meteor object.

[mlanning]

trafficstars

Currently using

"vue": "^3.2.37",
"vue-meteor-tracker": "^3.0.0-beta.7",

Here is a working example that I adapted from the Akyryum/meteor-vite project.

https://github.com/mlanning/example-vue-meteor-tracker

<template>
  <div class="flex flex-col gap-4">
    <h1 class="text-2xl">Learn Meteor!</h1>
    <ul>
      <li
        v-for="link of links"
        :key="link._id"
      >
        <a :href="link.url" target="_blank" class="underline">
          {{ link.title }}
        </a>
      </li>
    </ul>
    <pre class="bg-gray-100 rounded p-4">{{ { $subReady } }}</pre>
    <p v-if="$subReady.links">$subReady.links is true</p>
    <p v-if="!$subReady.links">$subReady.links is false</p>
  </div>
</template>

When subscribing to links in a meteor object, $subReady.links returns true in the template.

<script lang="ts">
import { defineComponent } from 'vue'
import { LinksCollection } from '/imports/api/links'

export default defineComponent({
  meteor: {
    $subscribe: {
      links: [],
    },
    links () {
      return LinksCollection.find({}).fetch()
    },
  },
  // mounted() {
  //   this.$subscribe('links')
  // }
})
</script>

However, when I try to subscribe from the mounted() lifecycle hook, $subReady.links returns false in the template.

<script lang="ts">
import { defineComponent } from 'vue'
import { LinksCollection } from '/imports/api/links'

export default defineComponent({
  meteor: {
    // $subscribe: {
    //   links: [],
    // },
    links () {
      return LinksCollection.find({}).fetch()
    },
  },
  mounted() {
    this.$subscribe('links')
  }
})
</script>

Also, Meteor dev tools shows the subscription as ready.