Dynamic Prop Cannot Recognize Raw Object JS Data

[dwighthouse]

According to the docs, dynamic props will "evaluate as JavaScript (any data type, not just strings)".

I attempted to send an arbitrary, small object through a dynamic prop: <metadata-box :@data="{test: {tags: [1, 2], lol: 3}}"></metadata-box>

Where the component metadata-box is: <p @raw="JSON.stringify(data)"></p>

Compilation fails:

1. Having trouble writing to "./dist/2022/index.html" from "./src/archives/collectionDateArchives.njk" (via EleventyTemplateError)
2. Evaluating a dynamic prop failed: `:@data="{test: {tags: [1, 2], lol: 3}}"`.
Original error message: Unexpected token ':' (via Error)

Original error stack trace: Error: Evaluating a dynamic prop failed: `:@data="{test: {tags: [1, 2], lol: 3}}"`.
Original error message: Unexpected token ':'
    at ModuleScript.evaluateScript (/PROJECT/node_modules/@11ty/webc/src/moduleScript.cjs:71:10)
    at ModuleScript.evaluateScriptInline (/PROJECT/node_modules/@11ty/webc/src/moduleScript.cjs:44:23)
    at AttributeSerializer.evaluateAttribute (file:///PROJECT/node_modules/@11ty/webc/src/attributeSerializer.js:160:41)
    at AttributeSerializer.evaluateAttributesArray (file:///PROJECT/node_modules/@11ty/webc/src/attributeSerializer.js:179:39)
    at AstSerializer.renderStartTag (file:///PROJECT/node_modules/@11ty/webc/src/ast.js:447:55)
    at AstSerializer.compileNode (file:///PROJECT/node_modules/@11ty/webc/src/ast.js:1132:66)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async AstSerializer.getChildContent (file:///PROJECT/node_modules/@11ty/webc/src/ast.js:349:56)
    at async AstSerializer.compileNode (file:///PROJECT/node_modules/@11ty/webc/src/ast.js:1226:36)
    at async AstSerializer.getContentForNamedSlotNode (file:///PROJECT/node_modules/@11ty/webc/src/ast.js:590:29)

I got other strange results.

<metadata-box :@data="{tags: [1, 2]}"></metadata-box> ...creates output <p>[1,2]</p>.

<metadata-box :@data="[{test: {tags: [1, 2], lol: 3}}]"></metadata-box> ...creates output <p>[{"test":{"tags":[1,2],"lol":3}}]</p>

So it appears that whatever is happening cannot recognize top-level objects correctly.