@vasya sure, hope it helps.

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>
<script lang="ts">
import { defineComponent, provide } from '@vue/composition-api';
import { DefaultApolloClient } from '@vue/apollo-composable'
import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient({
  uri: 'http://127.0.0.1/graphql'
})

export default defineComponent({
  name: 'App',
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },
});
</script>

@pazarbasifatih P.S. in composition api “this” is similar to context which can be accessed as second parameter in setup function

setup(props, context)

Or can be destructed if only refs is needed

setup(props, { refs })

If I understood you correctly you could just wrap it in span element by using replace and then use v-html to render html. Something like this:

<q-td
    key="calories" 
    :props="props"
    v-html="props.item.calories.replace(searchValue, `<span style='color:yellow'>${searchValue}</span>`"
>
</q-td>