Runtime compiler does not correctly generate the scope bag, and is thus non-reactive (incorrectly reactive?)

### 🐞 Describe the Bug

Been playing around in here: https://github.com/emberjs/ember.js/pull/20907
(because you can't catch a compiler error due to the usage of the microtask queue)

And it seems that the underlying glimmer-format for components just needs to change.
For example,
What is generated:
```
source: '({"id":null,"block":"[[[1,[32,0]]],[],[]]","moduleName":"(unknown template module)","scope":()=>[greeting],"isStrictMode":true})'
```
but this means that `greeting` is already consumed. Which we know from the template-compiler code, here:
```js
let scope = untrack(() => options.scope?.());

if (!scope) {
return evaluator;
}

return (source: string) => {
const argNames = Object.keys(scope ?? {});
const argValues = Object.values(scope ?? {});

return new Function(...argNames, `return (${source})`)(...argValues);
};

```
here, I added `untrack` because we should not be touching scope or any reactive values before a render occurs (else, we just re-run things over and over again).

The problem is obviously:
```js
"scope":()=>[greeting]
```
when the input is:
```js
return template(`{{greeting}}`, {
scope: () => {
return { greeting: this.str };
},
});
```

so... what should happen is obviously just... not mutating the shape of the `scope` bag

instead of:
```
"scope":()=>[greeting]
```
we need to take the `scope` that was passed to `template`, and use that directly.

like this:

```js
// in the template compiler
export function template(source, { scope }) {
// ....

// using old terminology here, cause I don't remember what the new stuff is
return setComponentTemplate(
{
block: '[...]',
scope,
isStrictMode: true,
},
templateOnly(),
);
}
```

- Node.js/npm: -
- OS: -
- Browser: -

### ➕ Additional Context
Add any other context about the problem here.