Fix: getContent re-renders first content section if section's layout have matching names

[wildbeard]

The Problem

When using getSection in from the mixin, if multiple sections with the same layout are passed the first section is rendered correctly but all subsequent sections are rendered with the first's content. Example:

[
  {
    "key": "aabbcc",
    "layout": "one-column-layout",
    "attributes": {
      "content": "<p>Content 1</p>"
    }
  },
  {
    "key": "ccbbaa",
    "layout": "one-column-layout",
    "attributes": {
      "content": "<p>Content 2</p>"
    }
  }
]

getSection would render <p>Content 1</p> in both div elements.

<template>
    <template v-for="section in content"
        :key="section.key">
        <div v-html="getContent('one-column-layout')?.content" />
    </template>
</template>
<script>
import SectionContent from '@/PageBuilder/mixins/SectionContent';
export default { 
    props: ['page', 'content'],
    mixins: [SectionContent],
}
</script>

The Fix

The fix is a backwards compatible workaround that will require any package users to update the way they use getContent in the above scenario. The changes will allow any currant usage to remain intact without any changes to existing code.

1. Added key to getSection so it can return early with a specific object rather if key is provided. Otherwise functionality remains the same.
2. Added getSectionContent that simply returns the inner attributes property.
3. Updated resources/js/Pages/Default/Index.vue to use getSectionContent
4. Updated docs.