# Live updates of components

**URL:** <https://meta.discourse.org/t/live-updates-of-components/318126>\
**Category:** Development\
**Created:** [July 24, 2024, 2:15pm UTC](https://meta.discourse.org/t/live-updates-of-components/318126 "2024-07-24T14:15:26Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)\
**Post date:** [July 24, 2024, 2:15pm UTC](https://meta.discourse.org/t/live-updates-of-components/318126/1 "2024-07-24T14:15:27Z")

</div>

I have a component that looks like this:

```plaintext
<td class="topic-rating">
  <span class="rating-title">{{ratingName}}</span> 
     <form>
        <input type="hidden" name="topic_id" value="{{topic.id}}">
        {{#unless useNames}}{{ratingLow}}{{/unless}}
        {{#each this.ratingOptions as |option|}}
            <RadioButton
              @name={{option.name}}
              @value={{option.value}}
              @selection={{this.myRating}}
              @onChange={{this.submitRating}}
            />
            {{#if useNames}} <span class="rotated-label">{{option.label}}</span>{{/if}}
        {{/each}}
        {{#unless useNames}}{{ratingHigh}}{{/unless}}
    </form>
</td>

```

The ratings are an array added to the topic\_view serializer and have `topic_id` and `rating_id` in each array item.

And I have this supporting js:

```plaintext
...
export default class TopicRatingComponent extends Component {
  get myRating() { 
    const ratingId = this.args.id;
    const rating = this.args.topic.user_ratings.find((rating) => Number(rating.rating_id) === Number(ratingId));
    return rating?.rating_value;
  }
...

```

It works as expected. And when I click on of the `RadioButtons` it calls a function that does a POST and updates a custom model that’s added to the topic serializer. If I reload the page, everything is expected, but I want those radio buttons to update live (right now, multiple radio buttons remain lit if you change it multiple times).

My controller does this:

```plaintext
      MessageBus.publish("/topic/#{params[:topic_id]}", reload_topic: true)

```

So I _think_ the stuff should be getting updated in the topics displayed in the topic list.

I think the issue is that I need to be using `@discourseComputed` instead of `get`, but when I do, I get an error. Maybe I can’t use `@discourseComputed` in a component? Maybe I need to do some kind of . . . something else?

EDIT: I asked chatGPT and it says that I need do so something with  
`import { tracked } from '@glimmer/tracking';`, so I’m trying that now. . .

---

_[View the full topic](https://meta.discourse.org/t/live-updates-of-components/318126)._