How to update vue-particles style across new input value online?

[ksuromanova]

Value updated, but style parcticles don`t update?

<template>	
	<div class="row wrap-banner">
		<vue-particles 	
			:particlesNumber="pNum"			
			:moveSpeed="mSpeed"		
			>				
		</vue-particles>
		<div class="col-md-7 skills-content ">
				<h1>Professional skills</h1>
				<ul>
					<li v-for="skill in skills">{{ skill }}</li>
				</ul>
		</div>	
		<div class="col-md-5">
			<form class="p-4">
				<div class="form-row">
					<div class="col-12 text-center">
						<h4>Particles options</h4>
					</div>
					<div class="form-group col-12 col-md-6">
						<label for="pNum">pNum</label>
						<input type="number" class="form-control myInput" 						 
						name="pNum"
						v-model.number="pNum"						
						/>
						<p>{{pNum}}</p>
					</div>
					<div class="form-group col-12 col-md-6">
						<label for="mSpeed">mSpeed</label>
						<input type="number" class="form-control myInput" 						 
						name="mSpeed"
						v-model.number="mSpeed"						
						/>
						<p>{{mSpeed}}</p>
					</div>
					<div class="col-md-12">
						<button class="btn btn-pink" type="button">Apply</button>
					</div>
				</div>
			</form>
		</div>		
	</div>		
</template>
<script>
import {mapGetters} from 'vuex';
  export default { 
  	data(){
  		return {
  			pNum: 150,
  		    mSpeed: 4	    
  		}
  	},
  	 computed: {
	      ...mapGetters('skills', {
	        skills: 'skills',
	      }) 
    }
  }
</script>	

[ko-fujita]

Me, too.

[ghost]

Did you ever found a way?

[PavloNaumenko]

I've fixed this issue with reloading component. we need to assign a key to the vue-particles and create a watcher. For Example:

...
<vue-particles :particlesNumber="pNum" :key="particlesKey"></vue-particles>
...
  data() {
    return {
      particlesKey: 1
    };
  },
  watch: {
    pNum() {
      this.particlesKey++;
    },
  },

[DaWoCX]

Hey PavloNaumenko I tried it your way. It works but somehow it slows down everytime I change it (in my case the color and linesColor). Did you notice something similiar?

I've fixed this issue with reloading component. we need to assign a key to the vue-particles and create a watcher. For Example:

...
<vue-particles :particlesNumber="pNum" :key="particlesKey"></vue-particles>
...
  data() {
    return {
      particlesKey: 1
    };
  },
  watch: {
    pNum() {
      this.particlesKey++;
    },
  },

Hey PavloNaumenko I tried it your way. It works but somehow it slows down everytime I change it (in my case the color and linesColor). Did you notice something similiar?