Not sticking when using sticky-side="bottom" with a data variable named bottom

[justwiebe]

My component was not sticking when I tried using string value of 'bottom' for sticky-side. After some investigation, I realized it's because I had a data attribute named bottom, and this line first checks if the Vue instance has a field named after the value, so my value of 'bottom' was being converted to 150.

This is easily fixed by renaming my variable, however it took a lot of time to figure out what the issue was. Perhaps consider moving the parameters into the directive in the form of an object (v-sticky="{ active: true, stickySide: 'bottom', stickyOffset: myDataObject }"). I believe this has the added benefit of being reactive, as well.

Another option would be creating a vue-sticky-component for more advanced options, which would allow the props to be reactive and would allow for visibility in the devtools for easier debugging.