Vue test utils not updating template when testing composables

[EbenOladutemu]

Subject of the issue

I have a simple test.

I expect the value of isEditing to be false initially. Then when I click on the edit button, I now expect isEditing to be true.

describe('LSA Edit', () => {
  test('Edit button is clickable', async () => {
    const TestComponent = defineComponent({
      setup() {
        return {
          ...useLoadsheddingComposable()
        }
      }
    })

    const wrapper = mount(TestComponent, {
      global: {
        plugins: [
          createTestingPinia({
            initialState: {
              loadshedding: {
                selectedSuburb: 'Province 3'
              }
            }
          })
        ]
      }
    })

    expect(wrapper.vm.isEditing).toBe(false)

    const wrapperSuburb = mount(SuburbSearch)
    const editSuburb = wrapperSuburb.find('[data-test="edit-suburb"]')

    await editSuburb.trigger('click')

    expect(wrapper.vm.isEditing).toBe(true)
  })
})

This is my template

  <div class="lsa-container" v-if="!isEditing">
    <div class="lsa-suburb">
      <p class="lsa-suburb__zone">
        {{ selectedSuburb.name }} (Zone {{ selectedSuburb.block_number }})
      </p>
      <p class="lsa-suburb__muni">
        {{ selectedSuburb.municipality }}, {{ selectedSuburb.province }}
      </p>
    </div>
    <div class="lsa-options">
      <UtilIcon :icon="'edit'" @click="editSuburb" data-test="edit-suburb" />
      <UtilIcon :icon="'delete'" @click="deleteSuburb" />
    </div>
  </div>

   <div v-if="isEditing">
      <input
        type="text"
        placeholder="Add area"
        @input="getSuburbs()"
        v-model="searchQuery"
        data-test="suburb-input"
      />
      <ul v-show="searchQuery.length > 0 && filteredSuburbs.length > 0">
        <li
          v-for="suburb in filteredSuburbs"
          :key="suburb.id"
          @click="chooseSuburb(suburb)"
          data-test="suburb-list"
        >
          <span>{{ suburb.name }} (Zone {{ suburb.block_number }})</span> <br />
          <strong>
            <span>{{ suburb.municipality }}, {{ suburb.province }}</span>
          </strong>
        </li>
      </ul>
      <p v-if="searchQuery.length > 2 && filteredSuburbs.length == 0">
        No area found
      </p>
    </div>

This is my composable

export function useLoadsheddingComposable() {
  const isEditing = ref(false)

  const editSuburb = () => {
    console.log('Edit suburb clicked')
    isEditing.value = true
  }

  return {
    isEditing,
    editSuburb
  }
}

The first assertion passed and it's false but the second fails as I am still getting Expected: true

Anything I'm doing wrong?