Stencil Component is not rerendering when passing in props

Question

I am using a stencil component in pure Javascript. I built and exported a Stencil web component that has 2 props, a string and an array of objects. The component will render some content based on the passed in props. The component doesn't re-render after I pass in the props. It seems like they are not detecting both the change, and also not firing the @Watch functions. Here is how I'm passing in the props:

const box = document.querySelector("custom-box");
box.colors = ["blue", "red"];
box.owner = 'John';
console.log(box.colors) // Array(2)
console.log(box.owner) // 'John'

The props are being passed in and set, but somehow the component isn't being rerendered.

If I instead use the following:

const box = document.querySelector("custom-box");
box.setAttribute("box", "John");
console.log(box.owner) // 'John'

Component will rerender in this case, but I don't want to JSON.stringify my array.

All the approaches, though, worked in Storybook.

What worked is passing my array as a JSON string into another prop, then make that temp prop watch for changes, and JSON.parse into my original prop. That will rerender my component.