vue knobs addon range component re-mounts the vue instance

[davidm-public]

Given this component:

<template>
  <div> ComponentA </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import { Component, Prop } from 'vue-property-decorator'

  @Component
  export default class ComponentA extends Vue{  
    @Prop({required:true}) val:number
    mounted(){
      console.log('mounted')
    }
  }
</script>

and a story:

 .addDecorator(withKnobs)
  .add('one', () =>{

     const val = number('val', 50, {
        range: true,
        min  : -50,
        max  : 50,
        step : 1,
     })
       
    return {
      template: `<component-a :val="${val}"></component-a>`
    }

The vue instance re-mounts (logs 'mounted') when this knob slider is moved.

Is it expected that moving the number() slider should re-mount the component?

I would have thought that just the property value should change??

[davidqqq]

Hi I can confirm same thing happens when using button.

// "@storybook/addon-knobs": "^4.0.0-alpha.18",
import { button } from '@storybook/addon-knobs'
export default {
  template: '<div></div>',
  mounted () {
    console.log('mounted')
    button('click, this.click)
  },
  methods: {
    click () {
      console.log('clicked')
    }
  }
}

Each click re-mount and re-rendered the component. Any way to prevent re-mounting?

[OlegIvaniv]

Hi, any updates on this?

[igor-dv]

There were a few similar issues regarding this. You can take a look on an attempt to solve this in #4516