Using interact with custom component breaks on interaction

I am not sure if this is a bug or I did something wrong.

import panel.widgets as pnw
from panel.reactive import ReactiveHTML
import param

class Test(ReactiveHTML):
    
    def __init__(self, *args, val=10, **kwargs):
        ReactiveHTML.__init__(self, *args, **kwargs)
        self.value = {
            'val': val
        }
    
    value = param.Dict()
    
    _template = "<div id='element'></div>"

    _scripts = {
        'render': """
            console.log(data.value.val)
        """
    }

def f(m=5):
    return Test(val=m)

pn.interact(f)

When I move the slider, for some reason value is not updated i.e. Test is not being called with the updated value. No error no console warning/errors are thrown, it just fails silently.

If you remove the default val=10, then it throws saying required kwarg not passed.

The issue I am facing is actually in an extension I am building with a bokeh model. The behaviour is slightly different there. On the first interaction with slider, it seems to break things but seems to work on further interactions.

Just to note, this is with panel 0.12.1.

Please let me know if I should add some more context here.