feat: CStack: make direction prop responsive

[Lutonite]

Describe the bug Whenever I try to use the CStack component using an array of strings for the direction prop, it errors out with the following messages: this.direction.startsWith is not a function, and this.direction.endsWith is not a function. For example:

<template>
  <CStack :direction="['column', 'row']">
    <span>Content 1</span>
    <span>Content 2</span>
  </CStack>
</template>

I think the issue comes from the computed variables _isInline and _isReversed in https://github.com/chakra-ui/chakra-ui-vue/blob/develop/packages/chakra-ui-core/src/CStack/CStack.js#L51 and https://github.com/chakra-ui/chakra-ui-vue/blob/develop/packages/chakra-ui-core/src/CStack/CStack.js#L54 respectively.

To Reproduce Steps to reproduce the behavior:

1. Generate Vue project using the latest version of chakra-ui/vue
2. Use above example
3. Cannot render due to error.

Stacktrace:

TypeError: this.direction.startsWith is not a function
    _isInline CStack.js:1

Expected behavior It should handle the case where the direction prop is an array for each breakpoint, not only when direction is a string.

Desktop:

• OS: Fedora 33
• Browser: Firefox Dev 86.0b6
• Version: "@chakra-ui/nuxt": "^0.2.4",

[codebender828]

Hey @Lutonite !

Thanks for recording this. Actually at the moment, the direction prop on the stack component is not a reactive style prop like the other style props. That's why it expects a string.

So it does seem like an interesting use case to have it as a native reactive style prop.

I'm happy to accept a pull request for this if you're open to the idea of creating it as a feature.