Obtención de datos

Si están utilizando el compositión API:

Pueden usar la herramienta que nos provee Vue llamada watchEffect(), que básicamente nos permite generar un watcher común y corriente, pero que se genere desde el primer renderizado del componente, sin esperar que cambie el valor de la propiedad observada. Es decir, hacer lo mismo que hacer la opción {inmediate: true} en el options API:

import { watchEffect } from "vue";

watchEffect(() => {
  console.log("params", route.params);
});

Les dejo el codigo con Composition API

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const chats = ref([]);

const route = useRoute();

watch(
  () => route.params,
  (val) => {
  console.log('update params en chatsview', val);
  chats.value = [
    {
      id: 1,
      name: 'Ximena'
    },
    {
      id: 2,
      name: 'Juan'
    },
    {
      id: 3,
      name: 'Pedro'
    }
  ]
}, { immediate: true })

Les dejo el código, de la lección, por si tienes errores o no funciona, lo puedas comparar y analizar.

export default {
  data() {
    return {
      chats: [],
    };
  },
  created() {
    this.$watch(
      () => this.$route.params,
      (val) => {
        console.log("UpDATE PARMAS", val);
        this.chats = [
          { id: 1, name: "Ximena" },
          { id: 2, name: "Javier" },
          { id: 3, name: "Teresita" },
          { id: 4, name: "Jorge" },
          { id: 5, name: "Ramiro" },
        ];
      },
      { immediate: true }
    );
  },
};