[Vuejs]-'-' In v-bind:style / Vue.js

As explained in the Docs of Vue: "You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names"

So you’d need to change the margin-left to either marginLeft OR 'margin-left' to get it to work as intended.

Your code would then become:

<div style="width:100px;height: 100px;background-color: red;cursor: pointer;" 
     v-bind:style="{ 'margin-left': margin + 'px'}">
     ...
</div>

OR

<div style="width:100px;height: 100px;background-color: red;cursor: pointer;" 
     v-bind:style="{ marginLeft: margin + 'px'}">
    ...
</div>

Hope this helps!