Repository: storybook
Issue: Component is not re-rendered when its iternal state is updated.
Labels: question / support,has workaround,web-components

**Describe the bug**
I am working on a Storybook project that uses lit-element based components.
While creating the Storybook project with the `sb init` script I selected the Web Components option.

I imported one of my components, that is using lit-element and got it working for the most part.
The component updates when I change the controls in the storybook UI Storybook and so on.

The component doesn't re-render if its props change internally.
For instance: I have a counter component that is composed of a _button_ and a _text element_.
The component has a prop _count_, which is updated every time the _button_ is clicked via a component's function called _increment_ which just increases the _count_ by one.

As far as I could tell, the button click will trigger the increment function properly, the count prop will increase, but the component won't be re-rendered with the new value of the _count_ prop.

This also happened when I modified the original Button component that came with the Web Components storybook, which only uses lit-html.

**To Reproduce**
Steps to reproduce the behavior:

0. Create a new storybook project for Web Components.
1. Create ExampleComponent.ts with the source code below.
2. Register the component in preview.js with the code below.(I am not sure if this is the right way to do it, but it seems that defining the component inside the .stories.ts file can cause errors on hot reload).
3. Create the ExampleComponent.stories.ts file (use the code below).
4. Run the _storybook_ script.
5. Select the Example component story from the side menu.
6. Click the "+" button on the component next to the "Counter value: 10" text.

**Expected behavior**
The number next to the button should update.

**Screenshots**
This is how the component should look in the UI
![image](https://user-images.githubusercontent.com/15961301/94265755-63c07f00-ff39-11ea-8580-c20af7b9f614.png)


**Code snippets**
The lit element component:
```ts
// ExampleComponent.ts

import { html, css, LitElement, property, TemplateResult } from 'lit-element';
/**
 * @element example-component
 * @prop title - Title of the component
 * @prop counter - By how much the component was incremented
 * @fires example-event - This event emits the current value of the counter property.
 */

export class ExampleComponent extends LitElement {
    static styles = css`
        :host {
            display: block;
            padding: 25px;
            color: #000000;
        }
    `;

    @property({ type: String }) title = 'Example counter';

    @property({ type: Number }) counter = 0;

    __increment(): void {
        this.counter++;
        console.log('Counter value', this.counter);

        const event = new CustomEvent('example-event', {
            detail: {
                counter: this.counter,
            },
        });
        this.dispatchEvent(event);
    }

    render(): TemplateResult {
        return html`
            <h2>${this.title}</h2>
            <span>Counter value: ${this.counter}</span>
            <button @click=${this.__increment}>+</button>
        `;
    }
}
```

I define the custom element in _.storybook/preview.js_ like so:

```ts
import { ExampleComponent } from ... ;

const componentName = 'indoc-example-component';

function defineCustomElement(): void {
    customElements.get(componentName) || customElements.define(componentName, ExampleComponent);
}

defineCustomElement();
```

And this is how the storybook file is defined:
```ts
// ExampleComponent.stories.ts

import { ExampleComponent } from ... ;

export default {
    title: `Example / Example component`,
    component: 'indoc-example-component',
    argTypes: {
        __increment: { action: '@click' },
    },
};

const Template = (args: any) =>
    `<indoc-example-component title="${args.title}" counter="${args.counter}"></indoc-example-component>`;

export const Primary: any = Template.bind({});
Primary.args = {
    title: 'Click the counter to increment',
    counter: 10,
};
```


**System:**
```
Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 85.0.4183.102
    Edge: Spartan (44.18362.449.0)

```
**Additional context**
I am using version 6.0.21 of Storybook.
Before switching to standard Storybook I was using the `@open-wc/demoing-storybook` (https://www.npmjs.com/package/@open-wc/demoing-storybook) package for demoing my lit-element based components, and the component updated as expected.
The component also behaves as expected when used inside a Vue 3 project.