Cannot fetch query inside async method, cant import graphql queries from outside

i want to fetch characters on property change from parent component (and ofc use these props), i tried to put useQuery into method, and run this method on prop change but something is not working, also i would like to use {result, error, loading} from useQuery.

here is the code:

<script lang="ts">
import { ref, defineComponent, watch } from "vue";
import gql from "graphql-tag";
import { useQuery, useLazyQuery, useResult } from "@vue/apollo-composable";

export default defineComponent({
  props: {
    message: [String],
  },

  setup(props) {
    const pageNumber = ref<number>(1);

    const variables = ref({
      page: pageNumber.value,
      name: props.message,
    });

    const fetchCharacters = async () => {
      const { result, error, loading } = await useLazyQuery(
        gql`
          query getCharacters($page: Int!, $name: String!) {
            characters(page: $page, filter: { name: $name }) {
              info {
                count
                pages
              }
              results {
                id
                name
                image
                gender
                species
                episode {
                  episode
                }
              }
            }
            location(id: 1) {
              id
            }
            episodesByIds(ids: [1, 2]) {
              id
            }
          }
        `,
        variables
      );
      const characters = useResult(result);
      console.log(characters);
      return { characters, result, error, loading };
    };

    watch(props, (value) => {
      fetchCharacters();
    });

    return {};
  },
});
</script>

Do you guys have any ideas how I can do this? <3 Ty for help.

I receive this error:

onServerPrefetch is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

1. Cannot fetch query inside async method

If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

You can involve useQuery before async part and useResult in it.

2. cant import graphql queries from outside

If you using vue-cli, you can config graphql-tag/loader

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('graphql').test(/\.(graphql|gql)$/).use('graphql-tag/loader').loader('graphql-tag/loader').end();
    /* ...other loader
    config.module
      .rule('svg-sprite').use('svgo-loader').loader('svgo-loader').end();*/
  },
}

Usage

import userQuery from './user.gql';
const { result } = useQuery(
  userQuery
)

or

const { result } = useQuery(
  require('./user.gql')
)