Watch progress and fill to fit Vue style.

[kuanyui]

Thanks for this JQuery plugin wrapper.

I found the default behavior of this component is a little confusing for developer, that developer must call method in this component via $refs to update the progress, that's quite strange for a Vue plugin. So I add a watch for progress and user should need not to call updateProgress() manually anymore in most scenarios, and this behavior should be more like a Vue plugin which is reactive to the changes of data model.

I didn't build dist in this PR because I encountered the error of "You are using the runtime-only build of Vue..." (so you may need to check the issue #15 first for the dist...)
At last I import VueCircle from 'vue2-circle-progress/src/index.vue' directly and it works great.

[vrajroham]

@kuanyui Thanks for your efforts. I'll review and publish this soon.

👏

[skinnyjames]

Can we put these watcher methods into the "watched" property?

 watch: {
    fill(nv) {
      this.updateFill(nv);
    },
    progress(nv) {
      this.updateProgress(nv);
    },
  },

That will help with keep the functions more intentional/declarative.

[skinnyjames]

Would you update the demo and the readme?
in App.vue you can do something like:

      redraw(){
        this.p = Math.floor(Math.random() * 100) + 1;
      }

and

     progress(event,progress,stepValue){
        console.log(stepValue);
        if (stepValue > 30) {
          this.fill = '#e3f218';
        }
      },

and we can bump the version and publish when it's compiled

[christopher4lis]

Idk if this'll help anyone seeing the repo has been inactive for a while, but I made a fork and integrated these changes so fill, emptyFill, and progress are all reactive. Started updating the docs too to reflect all of the possible props you can use:

https://github.com/chriscourses/vue-circle-progress