Как я могу переназначить ссылку Vue на другую ссылку и сохранить реактивность?

Краткий ответ будет таким:

Вы не можете переназначить реактивный объект, поскольку старые ссылки будут указывать на предыдущее значение объекта, и реактивность будет потеряна. Все реактивные переменные должны быть объявлены с помощью const.

Но, кажется, вы слишком усложнили логику. Насколько я понимаю, loading должно быть истинным, когда axios загружает данные (просто сделайте правильный импорт):

<template>
  <div @click = "loadEvents">{{ loading }}</div>
</template>

<script setup>

const loading = ref(false);

loadEvents()

async function loadEvents() {
  loading.value = true;
  const results = await backendApi.getEvents(selectedDate.value);
  // use results here
  // ...
  loading.value = false;
}

function getEvents() {
  return axios.get(...);
}

</script>

Но вы можете улучшить это и повторно использовать loading, переместив его в бэкэнд API:

// your backend-api.js:

export const loading = ref(false);

export const backendApi = {
  getEvents(){
    return this.callApi(...);
  },
  async callApi(...args){
    loading.value = true;
    const result = await axios.get(...args);
    loading.value = false;
    return result;
  }
};

// your component
<template>
  <div @click = "loadEvents">{{ loading }}</div>
</template>

<script setup>

import {loading, backendApi} from './backend-api.js';

loadEvents()

async function loadEvents() {
  const results = await backendApi.getEvents(selectedDate.value);
  // use results here
  // ...
}

</script>

ОБНОВЛЕНИЕ
После некоторого обсуждения с автором появилось новое решение.
Автор указал, что для каждого бэкэнд-вызова требуется ссылка загрузки. Перенести загрузку в бэкэнд API не так уж и хорошо, нам нужна некоторая обертка вызовов API и так далее. Вся логика становится НЕ агностической, что выглядит не идеально. Итак...
Недавно я стал поклонником сеттера с некоторыми действиями, и сеттеры обещаний — мой новый фаворит. Обычно у меня есть какой-то модуль с моими утилитами Vue, поэтому в этом случае я создал promiseRef(), который возвращает логическую ссылку с дополнительным свойством «обещание», которое контролирует его значение false/true. Таким образом, у нас есть загрузка ссылок, независимая от какой-либо другой логики, включая некоторый внутренний API как ненужную зависимость. Итак, вся установка выглядит так:

<script setup>
    
  import { backendApi } from './backend-api.js';
  import { promiseRef } from './utils.js'
  
  const loading = promiseRef();

  async function loadEvents(){
     const result = await (loading.promise = backendApi.getEvents());
    // use your results
  }

</script>

<template>
  <button @click = "loadEvents">{{ loading }}</button>
</template>

бэкэнд-api.js:

// just emulating some api call
export const backendApi = {
  getEvents(){
    return new Promise(resolve => setTimeout(resolve, 2000));
  }  
}

utils.js:

import { ref } from 'vue';
export const promiseRef = value => {
  
  const loading = ref(value || false);
  
  let promise;
  
  Object.defineProperty(loading, 'promise', {
    get(){
      return promise;
    },
    set(val){
      loading.value = true;
      (promise = val).then(() => loading.value = false);
    }
  });
  
  return loading;
  
};

Работающая суть Vue3 уже здесь!