runtime compiler incorrectly entangles with tracked scope in explicit form

packages/@ember/-internals/glimmer/tests/integration/components/runtime-template-compiler-explicit-test.ts

@@ -1,5 +1,6 @@
+import { tracked } from '@ember/-internals/metal';
 import { template } from '@ember/template-compiler/runtime';
-import { RenderingTestCase, defineSimpleModifier, moduleFor } from 'internal-test-helpers';
+import { RenderingTestCase, defineSimpleModifier, moduleFor, runTask } from 'internal-test-helpers';
 import GlimmerishComponent from '../../utils/glimmerish-component';
 import { on } from '@ember/modifier/on';
 import { fn } from '@ember/helper';
@@ -20,6 +21,65 @@ moduleFor(
       this.assertStableRerender();
     }
 
+    async '@test can derive the template string from tracked'(assert: Assert) {
+      class State {
+        @tracked str = `hello there`;
+
+        get component() {
+          assert.step('get component');
+          return template(this.str);
+        }
+      }
+      let state = new State();
+
+      await this.renderComponentModule(() => {
+        return template('<state.component />', { scope: () => ({ state }) });
+      });
+
+      this.assertHTML('hello there');
+      this.assertStableRerender();
+      assert.verifySteps(['get component']);
+
+      runTask(() => (state.str += '!'));
+
+      this.assertHTML('hello there!');
+      this.assertStableRerender();
+      assert.verifySteps(['get component']);
+    }
+
+    async '@test can have tracked data in the scope bag - and changes to that scope bag dont re-compile'(
+      assert: Assert
+    ) {
+      class State {
+        @tracked str = `hello there`;
+
+        get component() {
+          assert.step('get component');
+          return template(`{{greeting}}`, {
+            scope: () => {
+              assert.step('scope()');
+              return { greeting: this.str };
+            },
+          });
+        }
+      }
+      let state = new State();
+
+      await this.renderComponentModule(() => {
+        return template('<state.component />', { scope: () => ({ state }) });
+      });
+
+      this.assertHTML('hello there');
+      this.assertStableRerender();
+      assert.verifySteps(['get component', 'scope()']);
+
+      runTask(() => (state.str += '!'));
+
+      this.assertHTML('hello there!');
+      this.assertStableRerender();
+      assert.verifySteps(['scope()']);
+    }
+
     async '@test Can use a custom helper in scope (in append position)'() {
       await this.renderComponentModule(() => {
         let foo = () => 'Hello, world!';

packages/@ember/-internals/glimmer/tests/integration/components/runtime-template-compiler-implicit-test.ts

@@ -1,12 +1,65 @@
+import { tracked } from '@ember/-internals/metal';
 import { template } from '@ember/template-compiler/runtime';
-import { RenderingTestCase, defineSimpleModifier, moduleFor } from 'internal-test-helpers';
+import { RenderingTestCase, defineSimpleModifier, moduleFor, runTask } from 'internal-test-helpers';
 import GlimmerishComponent from '../../utils/glimmerish-component';
 import { on } from '@ember/modifier/on';
 import { fn } from '@ember/helper';
 
 moduleFor(
   'Strict Mode - Runtime Template Compiler (implicit)',
   class extends RenderingTestCase {
+    async '@test can have in-scope tracked data'(assert: Assert) {
+      class State {
+        @tracked str = `hello there`;
+
+        get component() {
+          assert.step('get component');
+
+          let getStr = () => {
+            assert.step('getStr()');
+            return this.str;
+          };
+
+          hide(getStr);
+
+          return template(`{{ (getStr) }}`, {
+            eval() {
+              return eval(arguments[0]);
+            },
+          });
+        }
+      }
+
+      let state = new State();
+
+      await this.renderComponentModule(() => {
+        return template('<state.component />', {
+          eval() {
+            assert.step('eval');
+            return eval(arguments[0]);
+          },
+        });
+      });
+
+      this.assertHTML('hello there');
+      this.assertStableRerender();
+      assert.verifySteps([
+        // for every value in the component, for eevry node traversed in the compiler
+        'eval', // precompileJSON -> ... ElementNode ->  ... -> lexicalScope -> isScope('state', ...)
+        'eval', // "..."
+        'eval', // "..."
+        'eval', // creating the templateFactory
+        'get component',
+        'getStr()',
+      ]);
+
+      runTask(() => (state.str += '!'));
+
+      this.assertHTML('hello there!');
+      this.assertStableRerender();
+      assert.verifySteps(['getStr()']);
+    }
+
     async '@test Can use a component in scope'() {
       await this.renderComponentModule(() => {
         let Foo = template('Hello, world!', {

packages/@ember/template-compiler/lib/template.ts

@@ -242,12 +242,10 @@ export function template(
   const normalizedOptions = compileOptions(options);
   const component = normalizedOptions.component ?? templateOnly();
 
-  queueMicrotask(() => {
-    const source = glimmerPrecompile(templateString, normalizedOptions);
-    const template = templateFactory(evaluate(`(${source})`) as SerializedTemplateWithLazyBlock);
+  const source = glimmerPrecompile(templateString, normalizedOptions);
+  const template = templateFactory(evaluate(`(${source})`) as SerializedTemplateWithLazyBlock);
 
-    setComponentTemplate(template, component);
-  });
+  setComponentTemplate(template, component);
 
   return component;
 }