我为Ory Kratos设置流程创建了自己的用户界面。我遇到的问题是，尽管返回的消息显示我的设置已成功更新，但我的新密码没有反映出来，我也没有成功恢复我的账户。以下是我使用Vue 3渲染UI的代码片段。

// SettingsVue.vue
<template>
  <div id="settings">
    <HomeTopbar :views="[]" />

    <div class="settings-wrapper">
      <h1 class="poppins fs_3 fw_6">恢复您的密码</h1>
      <OryFlow v-if="settingsFlow"
        :flow="settingsFlow"
        title="登录"
        form-id="settings-form"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

/* ory */
import { injectStrict } from '@/utils';
import { $ory } from '@/plugins/ory';
import { makeHandleGetFlowError } from '@/utils/flows';

/* types */
import type { SelfServiceSettingsFlow } from '@ory/kratos-client';

/* composables */
import { useRoute, useRouter } from 'vue-router';

/* components */
import OryFlow from '@/components/flows/OryFlow.vue';
import HomeTopbar from '@/components/ui/HomeTopbar.vue';

const ory = injectStrict($ory);
const route = useRoute();
const router = useRouter();
const settingsFlow = ref<SelfServiceSettingsFlow | undefined>();
const handleGetFlowError = makeHandleGetFlowError(router);

// check if we have a flow param
const { flow } = route.query;

const initializeSelfServiceSettingsFlowForBrowsers = () =>
  ory
    .initializeSelfServiceSettingsFlowForBrowsers()
    .then((response) => {
      settingsFlow.value = response.data;
      router.replace({
        query: {
          flow: response.data.id,
        },
      });
    })
    .catch(handleGetFlowError);

if (typeof flow !== 'string') {
  // if there's no flow in our route,
  // we need to initialize our login flow
  initializeSelfServiceSettingsFlowForBrowsers();
} else {
  ory
    .getSelfServiceSettingsFlow(flow)
    .then((response) => {
      settingsFlow.value = response.data;
    })
    .catch(handleGetFlowError);
}
</script>

<style scoped lang="scss">
#settings {
  width: 100%;
  height: 100%;

  .settings-wrapper {
    margin: var(--space-5) auto 0 auto;
    padding: 0 var(--space-3);
    margin-top: var(--space-4);
    width: 300px;
  }
}
</style>

#OryFlow.vue
<template>
  <div class="ory-flow">
    <form :id="formId" :action="flow.ui.action" :method="flow.ui.method">
      <OryUiNode v-for="node in flow.ui.nodes"
        :key="getNodeId(node)"
        :id="getNodeId(node)"
        :node="node"
        class="ui-node"
      />
    </form>
    <div class="messages" v-if="flow.ui.messages">
      <OryUiMessage v-for="message in flow.ui.messages" :message="message" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type {
  SelfServiceLoginFlow,
  SelfServiceRegistrationFlow,
  SelfServiceRecoveryFlow,
  SelfServiceSettingsFlow,
  SelfServiceVerificationFlow,
} from '@ory/kratos-client';
import OryUiNode from './OryUiNode.vue';
import OryUiMessage from './OryUiMessage.vue';
import { getNodeId } from '@ory/integrations/ui';

defineProps<{
  flow:
    | SelfServiceLoginFlow
    | SelfServiceRegistrationFlow
    | SelfServiceRecoveryFlow
    | SelfServiceSettingsFlow
    | SelfServiceVerificationFlow;
  formId?: string;
}>();
</script>

<style scoped lang="scss">
.ui-node + .ui-node {
  margin-top: var(--space-2);
}

.message {
  margin-top: var(--space-2);
}
</style>