title: Is this a valid usage of @cached for autotracking of Ember Octane?
body: <p>Recently I encountered an use case of <code>@cached</code> from <a href="https://github.com/pzuraq/tracked-toolbox" rel="nofollow noreferrer">tracked-toolbox</a> when writing a Glimmer component with autotracking. Here is an example code snippet:</p>
  <pre class="lang-js prettyprint-override"><code>import Component from '@glimmer/component';
  
  /**
   * Example usage
   * &lt;PersonInfo
   *  @a={{this.objA}}
   *  @b={{this.stringB}}
   *  @c={{this.intC}}
   * /&gt;
   * Where objA can be a large object
   */
  
  export default class PersonInfo extends Component {
  
    /**
     * I hope @cached here can help avoid re-running output getter in each
     * of the other getters, e.g. this.msg, this.link, this.name
     * But whenever any input args changes it triggers update 
     * (i.e. parent run this.objA = newObj)
     */
    get output() {
      return someExpensiveLogic(this.args.a, this.args.b, this.args.c);
    }
  
    get msg() {
      return translate(this.output.msg);
    }
  
    get link() {
      return convert(this.output.link);
    }
  
    get name() {
      return change(this.output.name);
    }
  }
  </code></pre>
  <pre><code>{{!-- In the template --}}
  &lt;div&gt;
    {{this.name}}
    {{this.msg}}
    {{this.link}}
  &lt;/div&gt;
  </code></pre>
  <p>Without using <code>@cached</code>, the above code will execute the <code>output</code> getter 3 times when rendering, once for each of <code>msg</code>, <code>link</code> and <code>name</code>.</p>
  <p>I also thought about building my own cache for <code>output</code>, but it requires me to manually keep track of which state is used and hash them, which could be expensive and hard to maintain.</p>
  <p>From my understanding, what <code>@cached</code> provides is an access to the &quot;global tag&quot; in the auto tracking system, so I can rely on that tag to determine when the cache needs refresh.</p>
  <p>Since this is not supported in a company project I work on for now, I hope this usage it can encourage us to add such support later.</p>
  <p>Note: I found that <code>@cached</code> is convenient wrapper of</p>
  <pre class="lang-js prettyprint-override"><code>import { createCache, getValue } from '@glimmer/tracking/primitives/cache';
  </code></pre>
  <p>So fundamentally what I need is <code>@glimmer/tracking/primitives/cache</code>.</p>