Component doesn't re-render with `replaceVariables`

I have searched previous posts like this one: How to listen for when a variable changes? - #6 by simones

There is also documentation here: Add support for variables in plugins | Grafana documentation

The simplest example in the grafana docs works on first render, but not after the variable has changed, but the data did not.

E.g. use the example in docs:

export function SimplePanel({ options, data, width, height, replaceVariables }: Props) {
  const query = replaceVariables('Now displaying $service');

  return <div>{query}</div>;

Note that my data source doesn’t change when the variable changes. E.g. use a simple static postgres query select 1

I create a service TextBox variable and type in some random chars. The panel just doesn’t refresh.

On work around I have is to add the variable in the query for that the data prop is a new one, hence re-render is triggered.