[Vuejs]-Vue bind class only on component load

You can use either computed property or methods to solve this.

With computed property:

...
  computed: {
    collapsed() {
      return this.foo && this.bar
    }
  }
...

<div class='content' :class='{ collapsed }'>
  ...
</div>

Example

With methods:

...
  methods: {
    computeCollapsed(inputs) {
      return inputs.every(x => x)
    }
  }
...

<div class='content' :class='{ collapsed: computeCollapsed([foo, bar]) }'>
  ...
</div>

Example

In comparison, a method invocation will always run the function whenever a re-render happens.

Source Computed Caching vs Methods

If you only have a few sections and the number of sections if fixed, you should use computed property over methods.

I ended up making a clone of the initial data and props that was not reactive, and using that to set up the initial status.