Treesitter highlight ES6 html in javascript string

Question

I'm trying to make a treesitter injection which will add html syntax highlighting to any string in an object, if the key the string belongs to is template, for example:

after/queries/javascript/injections.scm

export default {
  name: "CreativeBatcher",
  components: {
    IframePreview,
  },
  template: `
    <div>this has<span>highlighting!</span></div>
  `,
}

So far the only thing I can get working is having ALL strings highlight:

; extends

((template_string) @html
 (#set! language "html"))

Here is what I was working on, and I can see its targeting the key properly, but instead of highlighting the value, it is applying the syntax highlighting to the word template

((object
  (pair
    key: (property_identifier) @key
    value: (template_string) @html))
 (#match? @key "template")
 (#set! language "html" @html))