What is the correct way to write a computed property?

Question

css

Hello, I've run into this problem. You need to write a calculated property in vue.js that will take the width of the block, then do the calculation (width / 2 * (-1)) and apply the result to the margin-left property of the block. I know that it will sound strange, but I know how to solve this question on Jquery and pure js, here is an example on Jquery:

jQuery(document).ready(function($) {
  var width = $('.ucp').width();
  $('.ucp').css('margin-left', width / 2 * (-1) );
});

The problem is that I want to try to change the width reactively, but I don't know how to write all this correctly. I'm new to vue, if it's not difficult, describe how you can use vue (v-bind: style) to reactively calculate changing values. I can imagine how it should look like, but I'm still confused.

Answer 1

Here is an example