how to pass variable from store to apollo query

Question

I'm trying to pass a variable in store into an apollo query but I can't find the proper way to do it. the variable I'm trying to use is user.username and if I do {{ user.username }} in the template section it prints but within the script section user outputs as a weird Json type thing. so ideally I want my query to work something like so:

export default {
  setup() {
    ...

    const query = gql`
        query ($username: String) {
            ...
        }
    `;

    const variables = ref({
      username: /* user.username */,
    })

    const {result, loading, error} = useQuery(query, variables);

    return {
      user,
      result,
      loading
    }
  }

I tried using computed() or Json.stringify and about a dozen other random things but nothing is working. There isn't any issues with the query itself since if I use a string like username: "username" the query works fine.

Hope I did a decent job at explaining things. thanks in advance

---

edit: weird JSON thing: home.vue:

<template>
  {{ user }}
</template>

<script>
import {useStore} from "vuex";
import {auth} from "@/firebaseConfig";
import {computed} from "vue";

export default {
  setup() {
    const store = useStore()

    auth.onAuthStateChanged(user => {
      store.dispatch("fetchUser", user);
    });

    const user = computed(() => {
      return store.getters.user;
    });

   console.log(user)

    return {
      user
    }
  }
}
</script>

output (console.log)

Object { _setter: setter(), dep: undefined, __v_isRef: true, __v_isReadonly: true, _dirty: true, effect: {…}, _cacheable: true }
​
__v_isReadonly: true
​
__v_isRef: true
​
_cacheable: true
​
_dirty: false
​
_setter: function setter()
​
Object { _setter: setter(), dep: undefined, __v_isRef: true, __v_isReadonly: true, _dirty: true, effect: {…}, _cacheable: true }
​
__v_isReadonly: true
​
__v_isRef: true
​
_cacheable: true
​
_dirty: false
​
_setter: function setter()
​
_value: Proxy { <target>: {…}, <handler>: {…} }
​​
<target>: Object { loggedIn: true, data: {…} }
​​​
data: Object { Username: "dxbh0517", … }

Username: "dxbh0517"
​​​​
uid: "2JlznrpQk"
​​​​
<prototype>: Object { … }
​​​
loggedIn: true
​​​
<prototype>: Object { … }
​​
<handler>: Object { get: get2(target, key, receiver), set: set2(target, key, value, receiver), deleteProperty: deleteProperty(target, key), … }
​
dep: Set [ {…} ]
​
effect: Object { fn: user(), scheduler: effect(), active: true, … }
​
<prototype>: Object { … }
Challenge.vue:30:12

​
dep: Set [ {…} ]
​
effect: Object { fn: user(), scheduler: effect(), active: true, … }
​
<prototype>: Object { … }

output ({{ user }}):

{ "loggedIn": true, "data": { "Username": "username", "uid": "2JlznrpQk" } }